Swiper实现轮播图效果

为了实现轮播图（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 })

 

posted @ 2019-10-30 09:23  罗毅豪  阅读(977)  评论(0)  编辑  收藏  举报