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);
        })
  • 相关阅读:
    CDI Features
    Java Design Patterns
    pyautogui
    TCP/UDP的套接字Socket通信工作流程
    TCP连接的建立与释放(三次握手、四次挥手)
    python实现单例模式的三种方式及相关知识解释
    面向对象的三个基本特征
    网络编程
    初识python
    目录
  • 原文地址:https://www.cnblogs.com/yccg990118/p/11980839.html
Copyright © 2011-2022 走看看