Swiper 是纯 JS 打造的轮播图插件,相比于其他同类插件,Swiper 支持触摸滑动,这使得 Swiper 在移动端开发具有很大优势。
Swiper 官网:http://www.swiper.com.cn/
在具体的项目开发中,要在 html 文件的 <head>
标签内引用 Swiper 的 css 文件,如果项目较大,不建议在头部引入 Swiper 的 js 文件,因为加载 js 文件的同时页面不会加载其他内容,如果 js 文件较大,会影响用户体验。js 文件可以在 <body>
内引入,只要在该 Swiper 的 <script>
标签之前就可以。
官方文档对源码有很详细的介绍,在这里推荐使用 autoplay.html 这个模版,然后在第一时间在<script>
标签里加上 loop: true,
(不要忘记在前面加一个逗号),下面是我在实践中总结的一些经验:
1. 给 Swiper 加上编号
什么意思呢?就是通过 class 或者 id 将每个 Swiper 区分开,一个页面如果出现两个及以上的 Swiper ,如果没有区分,第二个 Swiper 的样式将会覆盖掉第一个的样式。我的做法就是在每一个默认 class 之后加一个私有 class ,如图所示。这样在写第二个 Swiper 的时候,以同样的规则命名为 “2” ,就会将每个 Swiper 区分开。
2. 换掉指示器小点的样式
Swiper 默认的指示器是蓝色小圆点,这个默认效果可以通过 .swiper-pagination-bullet
和 .swiper-pagination-bullet-active
来改变,但是有时要改变它们的层级关系和透明度,层级关系用 z-index
来调,透明度用 opacity
来调,0 是全透明,1 是不透明,用 0-1 的小数来调整。
3. 指示器和切换按钮可以提出来
上面那个图片里可以看到, pagination1
next1
prev1
是包含在 container1
里面的,但有时指示器和按钮在轮播图外面,就可以将这三个元素提出来,和 container1
同级,这样就可以相对于外面的容器来进行定位,比较方便。
4. 待续…