如何给两个swiper建立关系

Posted 2020-09-24 User猿

单个swiper已经满足不了需求了。

各种花式轮播已经慢慢进入市场。swiper该如何立足，那么请看。

<div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
                <div class="swiper-slide">Slide 4</div>
                <div  class="swiper-slide">Slide 5</div>
                <div class="swiper-slide">Slide 6</div>
                <div class="swiper-slide">Slide 7</div>
                <div class="swiper-slide">Slide 8</div>
                <div class="swiper-slide">Slide 9</div>
                <div class="swiper-slide">Slide 10</div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>

做两个swiper轮播，样式视情况自定。

分别为两个swiper轮播做入配置参数，

var galleryTop = new Swiper(‘.gallery-top‘, {
        nextButton: ‘.swiper-button-next‘,
        prevButton: ‘.swiper-button-prev‘,
        spaceBetween: 10,    //每个slide 的间距
        loop:true,
        loopedSlides: 5, //looped slides should be the same 
        preventsDefault:false,   //干掉默认阻止的事件
        observer:true,          //初始化子元素
        observerParents:true,    //初始化父元素
    });

为第二个swiper轮播做入配置参数。

 var galleryThumbs = new Swiper(‘.gallery-thumbs‘, {
        spaceBetween: 10,
        slidesPerView: 6,
        touchRatio: 0.2,
        loop:true,
        loopedSlides: 5, //looped slides should be the same
        slideToClickedSlide: true,
        preventsDefault:false,
        observer:true,
        observerParents:true,
    });

关键来了，给两个对象建立连接

galleryTop.params.control = galleryThumbs;
    galleryThumbs.params.control = galleryTop;

这样 实现的效果点击下面的图片，上面的图片也变化，

反过来 点击上面的图片，下面的小图片也变化。

这个简单的效果 希望可以帮助你们。谢谢~~~