zoukankan      html  css  js  c++  java
  • 双swiper相互控制问题

        //导航swiper
        var mySwiperNav = new Swiper('#nav-swiper', {
            observer: true, //修改swiper自己或子元素时,自动初始化swiper
            observeParents: true, //修改swiper的父元素时,自动初始化swiper
            slidesPerView: 4,
            watchSlidesVisibility: true, //防止不可点击
            centeredSlidesBounds: true,
            speed: 300,
            onClick: function (e) {
                //点击导航之后,设置导航相应的样式
                $(e.clickedSlide).parent().children().removeClass("swiper-slide-active");
                $(e.clickedSlide).addClass("swiper-slide-active");
                mySwiperList.slideTo(e.clickedIndex);
            }
        })

        //列表swiper
        var mySwiperList = new Swiper('#list-swiper', {
            observer: true, //修改swiper自己或子元素时,自动初始化swiper
            observeParents: true, //修改swiper的父元素时,自动初始化swiper
            effect: "coverflow",
            
            onTransitionEnd: function(e){
                let index = e.activeIndex;
                mySwiperNav.slideTo(index);
                $("#nav-swiper .swiper-wrapper>div").removeClass("swiper-slide-active");
                $("#nav-swiper .swiper-wrapper>div").eq(index).addClass("swiper-slide-active");
                
            }
        })
        //导航swiper与列表swiper关联
        mySwiperNav.on("transitionEnd",function(e){
            mySwiperList.slideTo(e.activeIndex);
        })
  • 相关阅读:
    模板 快速询问GCD
    Educational Codeforces Round 13 A. Johny Likes Numbers 水题
    Codeforces Round #102 (Div. 1) A. Help Farmer 暴力分解
    CDOJ 1402 三角形棋盘上的博弈游戏 状压DP
    CDOJ 1401 谭爷的黑暗沙拉 数学
    Bootstrap3.0学习第七轮(按钮)
    Bootstrap3.0学习第六轮(表单)
    Bootstrap3.0学习第五轮(表格)
    Bootstrap3.0学习第四轮(排版)
    Bootstrap3.0学习第三轮(栅格系统案例)
  • 原文地址:https://www.cnblogs.com/yccg990118/p/11980839.html
Copyright © 2011-2022 走看看