Swiper 的使用心得

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 加上编号

QQ截图20160809094159

什么意思呢?就是通过 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. 待续…

发表评论

电子邮件地址不会被公开。 必填项已用*标注