html5移动端轮播滑动效果（swiper实现）

ゞ浴缸里的玫瑰 2024-04-17 16:17 76阅读 0赞

今天开发的项目有个页面需要做一个轮播图效果，我也在网上找了插件，最后通的是swiper插件，和移动端开发比较匹配，官网地址：[https://www.swiper.com.cn/][https_www.swiper.com.cn]，可以在官网查看更多的api和下载插件。

下面介绍一下如何用swiper来实现移动端的轮播图效果。

因为我用的是vue开发的项目，所以我在项目中要先引入了swiper的插件，包括swiper.min.js和swiper.min.css，然后是代码的实现。

引入js和css代码（因为我也用的jquery）：

html代码：

在代码里面我运用了vue中的v-for指令对轮播的内容进行遍历循环，这样可以减少代码的冗余度，tabLists数组中有两个属性：图片的地址imgSrc和需要展示的文字name,可以根据自己的需要进行设置。

js代码：

var mySwiper = new Swiper ('.swiper-container', {
      slidesPerView:5,
      // 前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
        disabledClass: 'my-button-disabled',
      }
    })

下面介绍一些基本的属性：

slidesPerView：需要在一页展示的个数；

navigation：是一个前进后退组件，其中有以下属性，可以在官网详细查看：[官网地址][Link 1]

loop：是否循环轮播，默认为false，也就是滑到一个方向就滑不动了，轮播内容不会循环轮播。

speed：滑动到结束的时间，默认300ms；

direction：滑动的方向，默认是水平方向horizontal，可以设置为竖直方向：vertical；

其他的属性就不一一介绍了，详细的可以去官网查看。

就会实现下面这个效果图：

![20190828163108968.png][]

在运用这个轮播图插件的时候，有一个属性要自己设置，就是总共轮播的内容长度，也就是swiper-wrapper标签，要不然会出现滑动空白的情况。

除此之外我们在使用这个插件的时候，正常情况下左右箭头都是在内容中，官网默认的情况，想要把箭头拿出来放到外面，就要在轮播内容外面包裹一个父级div，然后在这个div中写箭头代码，调整剪头即可。又什么问题欢迎提问，看到就会及时解答！

[https_www.swiper.com.cn]: https://www.swiper.com.cn/
[Link 1]: https://www.swiper.com.cn/api/index.html
[20190828163108968.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/563350476544472b9fd27781c07ba04e.png