为了实现轮播图(carousel)效果或左右滑动显示不同的内容,我们采用Swiper来实现。
需要引入swiper.min.css和swiper.min.js,文件可从https://github.com/LuoYiHao/front-end-lib/tree/master/swiper下载。
示例HTML代码:
1 <div class="swiper-container" id="carousel">
2 <div class="swiper-wrapper">
3 <div class="swiper-slide">
4 <img src="../../images/1.jpg" class="banner"/>
5 </div>
6 <div class="swiper-slide">
7 <img src="../../images/2.jpg" class="banner" />
8 </div>
9 <div class="swiper-slide">
10 <img src="../../images/3.jpg" class="banner" />
11 </div>
12 </div>
13 </div>
示例JS代码:
1 var mySwiper = new Swiper('#carousel', {
2 autoplay:true,
3 loop: true,
4 })