0
点赞
收藏
分享

微信扫一扫

Swiper实现轮播图效果

纽二 2022-06-16 阅读 105

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

 


举报

相关推荐

0 条评论