如何给两个swiper建立关系

时间：2022-12-24 12:50:04

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

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

<div class="swiper-container">

            <div class="swiper-wrapper">

                <div class="swiper-slide">Slide </div>

                <div class="swiper-slide">Slide </div>

                <div class="swiper-slide">Slide </div>

                <div class="swiper-slide">Slide </div>

                <div  class="swiper-slide">Slide </div>

                <div class="swiper-slide">Slide </div>

                <div class="swiper-slide">Slide </div>

                <div class="swiper-slide">Slide </div>

                <div class="swiper-slide">Slide </div>

                <div class="swiper-slide">Slide </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: ,    //每个slide 的间距

        loop:true,

        loopedSlides: , //looped slides should be the same

        preventsDefault:false,   //干掉默认阻止的事件

        observer:true,          //初始化子元素

        observerParents:true,    //初始化父元素

    });

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

 var galleryThumbs = new Swiper('.gallery-thumbs', {

        spaceBetween: ,

        slidesPerView: ,

        touchRatio: 0.2,

        loop:true,

        loopedSlides: , //looped slides should be the same

        slideToClickedSlide: true,

        preventsDefault:false,

        observer:true,

        observerParents:true,

    });

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

galleryTop.params.control = galleryThumbs;

    galleryThumbs.params.control = galleryTop;

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

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

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

相关文章