Swiper 是一款优秀的滑动插件,支持手机端和pc端。现为3.x版本,2.x版本兼容ie8浏览器。
插件原版地址:
http://idangero.us/swiper/
中文版地址为:
http://www.swiper.com.cn/
实例地址:
15-infinite-loop-2
核心代码:
var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', slidesPerView: 1, paginationClickable: true, spaceBetween: 30, loop: true, onSlideChangeEnd: function(swiper){ console.log(swiper.activeIndex) //每次切换时,提示现在是第几个slide changeBg((swiper.activeIndex) % 5); } }); // 回调切换背景 function changeBg(index){ $('#main').removeClass().addClass(function(){ switch (index) { case 0: return 'bg-5'; break; case 6: return 'bg-1'; break; default: return 'bg-'+index; break } }); } |
loop模式:
会在wrapper前后生成若干个slides让slides看起来是衔接的,用于无限循环切换。
loop模式下会在slides前后复制若干个slide,,前后复制的个数不会大于原总个数。
默认为0,前后各复制1个。
例:
0,1,2 --> 2,0,1,2,0
实例中index为0和6时,做相应处理。
activeIndex
返回当前活动块的索引。loop模式下注意该值会被加上复制的slide数。
© admin for 可乐吧, 2016. |
Permalink |
No comment |
Add to
del.icio.us
Post tags: Swiper
您可能也喜欢: |
jquery.simplemodal支持浏览器版本总结 |
一步一步安装Grunt |
CSS清除浮动常用方法小结 |
开源图标库 Open Icon Library |
无觅 |
Feed enhanced by Better Feed from Ozh