IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    Swiper 循环切换回调实例

    admin发表于 2016-11-04 15:12:38
    love 0

    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



沪ICP备19023445号-2号
友情链接