一、左右輪播
要先載入Slick、JQuery:
<link rel="stylesheet" type="text/css" href="js/slick/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="js/slick/slick/slick-theme.css"/>
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/slick/slick/slick.min.js"></script>
HTML:
<div style="padding-bottom: 50px;">
<div class="banner">
<div class="slider single-item responsive">
<div><img src="images/1.png"><h3>1</h3></div>
<div><img src="images/2.png"><h3>2</h3></div>
<div><img src="images/3.png"><h3>3</h3></div>
<div><img src="images/4.png"><h3>4</h3></div>
<div><img src="images/5.png"><h3>5</h3></div>
</div>
</div>
</div>
JavaScript:
在此設定要輪播的效果。
$('.responsive').slick({
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
arrows: true,
prevArrow: '<button type="button" class="slick-prev Btn-prev">Previous</button>',
nextArrow: '<button type="button" class="slick-next Btn-next">Next</button>',
autoplaySpeed: 3000,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
---------------------------------------------------
二、效果介紹:
1. 需要左右兩邊可滑動的箭頭〈如完成圖上〉:
arrows: true,
prevArrow: '<button type="button" class="slick-prev Btn-prev">Previous</button>',
nextArrow: '<button type="button" class="slick-next Btn-next">Next</button>',
2.畫面中一次輪播的幾張圖片:
slidesToShow: 4
3.左右滑動時,一次更新幾張圖片:
slidesToScroll: 1
4.照片播完時,再重新播放:
infinite: true
5.照片自動播放:
autoplay: true
6.每次輪播時間的間隔:
autoplaySpeed: 3000,
CSS:
h3 {
text-align: center;
}
.banner {
width: 80%;
margin: auto;
}
img {
width: 200px;
}
.slick-slide {
height: 45%;
}
.Btn-prev, .Btn-next {
background: #6994B9;
}
.slick-slide img{
margin: auto;
}
完成如下:
留言列表