swiper3使用心得

原创 2018年04月17日 14:34:12

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

}

                                             

Convert an UNSIGNED byte to a JAVA type

In JAVA, a byte always considered as signed when converted to another type. We must mask the sign bi...
  • wxyxl
  • wxyxl
  • 2001-05-04 14:13:00
  • 675

swiper插件制作轮播图swiper2.x和3.x差别

swiper3.x只兼容到ie10+,比较适合移动端。 swiper3.x官网  http://www.swiper.com.cn/ swiper2.x可以兼容到ie7+,官网是http://...
  • u012011360
  • u012011360
  • 2015-08-16 14:37:05
  • 5026

手机端滑动插件swiper3.x的使用示例

1  兼容性ie9勉强兼容 2  http://www.swiper.com.cn/api/index.html test * {margin: 0...
  • u011500781
  • u011500781
  • 2016-03-27 13:45:48
  • 4170

Swiper-3.3.1滑动翻页

  • 2016年07月22日 17:56
  • 405KB
  • 下载

swiper3.4 IE8兼容性问题

swiper3.4在IE8下面会报错,换成idangerous.swiper-2.1.min.js就好了,资源已上传!!!...
  • wangqiuchen_Study
  • wangqiuchen_Study
  • 2017-01-06 17:11:59
  • 7309

Swiper 3 的特色功能、示例

无需加载公用库:Swiper无需加载任何公共库(如jquery)即可运行,这保证了Swiper的轻量和运行速度。Swiper也可以在加载了公共库的环境下安全的运行,如jQuery, Zepto, jQ...
  • henrypt
  • henrypt
  • 2016-12-06 09:10:03
  • 1457

Swiper-3.3.1

  • 2016年08月18日 16:03
  • 407KB
  • 下载

SwiperrefreshLayout实现下拉刷新(demo)

SwiperrefreshLayout实现下拉刷新 简介 SwipeRefreshLayout组件只接受一个子组件:即需要刷新的那个组件。它使用一个侦听机制来通知拥有该组件的监听器有刷新事件发...
  • qq_34908107
  • qq_34908107
  • 2016-08-13 11:44:28
  • 2084

MSChart使用.doc

  • 2009年01月05日 12:16
  • 48KB
  • 下载

ixload使用心得

  • 2018年04月23日 17:11
  • 282KB
  • 下载
收藏助手
不良信息举报
您举报文章:swiper3使用心得
举报原因:
原因补充:

(最多只允许输入30个字)