Swiper联动

仅做个人收藏记录。

实例化两个swiper对象，点击上边的，下边的跟着一起滑动，swiper版本3.4.2

<div class="gt-swipertab">
                <div class="swipertabcontainer">
                    <div class="swiperprev" style="transform: rotate(180deg);">
                        <i class="layui-icon layui-icon-triangle-r"></i>
                    </div>
                    <div class="swipernext">
                        <i class="layui-icon layui-icon-triangle-r"></i>
                    </div>
                    <div class="swipertab">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide selected">宅基地1</div>
                            <div class="swiper-slide">宅基地2</div>
                            <div class="swiper-slide">宅基地3</div>
                            <div class="swiper-slide">宅基地4</div>
                            <div class="swiper-slide">宅基地5</div>
                            <div class="swiper-slide">宅基地6</div>
                        </div>
                    </div>

                </div>
                <div class="swiper-container swipertabcnt">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide swiper-no-swiping">宅基地1</div>
                        <div class="swiper-slide swiper-no-swiping">宅基地2</div>
                        <div class="swiper-slide swiper-no-swiping">宅基地3</div>
                        <div class="swiper-slide swiper-no-swiping">宅基地4</div>
                        <div class="swiper-slide swiper-no-swiping">宅基地5</div>
                        <div class="swiper-slide swiper-no-swiping">宅基地6</div>
                    </div>
                </div>
            </div>

 css

.gtmap .right-panel .carousel-box .gt-swipertab {
  border: 0;
  height: calc(100% - 50px);
}

.gtmap .right-panel .carousel-box .gt-swipertab .swipertab {
  overflow: hidden;
  left: 18px;
  right: 18px;
  border-right: 1px solid #dedede;
}

.gtmap .right-panel .carousel-box .gt-swipertab .swipertab .swiper-slide {
  line-height: 30px;
  height: 30px;
  border: 1px solid #dedede;
  border-right: 0;
  box-sizing: border-box;
  font-size: 14px;
}

.gtmap .right-panel .carousel-box .gt-swipertab .swipertab .selected {
  color: #fff;
  background-color: #1f88d1;
}

.gtmap .right-panel .carousel-box .gt-swipertab .swipertab .selected:after {
  display: none;
}

.gtmap .right-panel .carousel-box .gt-swipertab .swipertabcontainer {
  line-height: 30px;
  height: 30px;
}

.gtmap .right-panel .carousel-box .gt-swipertab .swiperprev,
.gtmap .right-panel .carousel-box .gt-swipertab .swipernext {
  line-height: 30px;
  height: 30px;
  background-color: transparent;
  border: 0;
  width: 14px;
  color: #0090f0;
}

.gtmap .right-panel .carousel-box .gt-swipertab .swipertabcnt {
  top: 30px;
  border: 0;
}

.gtmap .right-panel .carousel-box .gt-swipertab .swipertabcnt .swiper-slide {
  position: relative;
  overflow: hidden;
}

 js

//宅基地详情swiper渲染模块
        function setCurrentSlide(ele, index) {
            $(".swipertab .swiper-slide").removeClass("selected");
            ele.addClass("selected");
        }
        var swipertab = new Swiper('.swipertab', {
            //			设置slider容器能够同时显示的slides数量(carousel模式)。
            //			可以设置为number或者 'auto'则自动根据slides的宽度来设定数量。
            //			loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
            slidesPerView: 4,
            paginationClickable: true,//此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
            spaceBetween: 0,//slide之间的距离（单位px）。
            freeMode: true,//默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动且不会贴合。
            loop: false,//是否可循环
            prevButton: '.swiperprev',
            nextButton: '.swipernext',

        });


        var swipertabcnt = new Swiper('.swipertabcnt', {
            //freeModeSticky  设置为true 滑动会自动贴合
            direction: 'horizontal',//Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。
            loop: false,
            noSwiping: true,
            autoHeight: false//自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
        });

        swipertab.slides.each(function (index, val) {
            var ele = $(this);
            ele.on("click", function () {
                console.log(ele);
                setCurrentSlide(ele, index);
                swipertabcnt.slideTo(index, 500, false);
            });
        });