swiper3使用心得

1.显示多个silde,每次轮播一个slide

  选用插件版本:未加载jQuery或zepto的版本。

  使用方法:引入swiper.min.css文件,并在js部分添加:

                        1)slidesPerView:‘auto’,或者slidesPerView:3 //显示slide数量,填数字时会自动根据显示框大小计算每个slide的宽以及间距。而选择‘auto’会根据container宽度来调整slide的数量。

                        2)spaceBetween: 数字,//表示slide之间的间距。

 注意: 

1)在loop模式下使用slidesPerView:‘auto’,需要loopedSlides:数字,来设置需要的循环(loop)个数,一般情况下数字设为slide个数。

 2)当在loop模式下使用slidesPerView:‘auto‘时,总共的slide个数要大于每屏显示的slide个数,如果小于等于,则会向下轮播一次后停止向下轮播。

2.导航按钮定位,颜色

   定位:导航按钮可以显示在轮播框外,在container框外加一个div框做相对定位即可。

   颜色:导航按钮默认为蓝色,另设置有白色,黑色,需要用时可加class: swiper-button-white/black

 若是要修改为其他颜色则需要修改swiper.css:

     .swiper-button-prev.swiper-button-white,
.swiper-container-rtl .swiper-button-next.swiper-button-white {

background-image:url("data:image/svg+xml;

charset=utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");

若想修改为其他颜色则将黄色标示部分改为想修改颜色的十六进制代码。

若想加粗导航栏则想蓝色标示部分修改为:M27%2C22L5%2C44l-4.2-4.2L18.6%2C22L0.8%2C4.2L5%2C0z

}

                                             

阅读更多
个人分类: 插件
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭