拖动图像后如何使滑动导航箭头起作用

时间:2019-04-25 11:24:37

标签: jquery

我在其中一页中使用https://idangero.us/swiper/api/。我想要达到的目的是要有一个带有缩略图以及导航箭头的滑块。一切正常,但是,一旦我将图像拖动到下一个滑块,导航箭头将无法正常工作。

    <div class="floorplan-container floorplan-set tab-container">
      <div class="swiper-wrapper">
          <div class="image swiper-slide" style="background-image: url'https://lorempixel.com/1280/720/city/?37300')">
          </div>
    <div class="image swiper-slide" style="background-image: url'https://lorempixel.com/1280/720/city/?37300')">
          </div>
    <div class="image swiper-slide" style="background-image: url'https://lorempixel.com/1280/720/city/?37300')">
          </div>
    <div class="image swiper-slide" style="background-image: url'https://lorempixel.com/1280/720/city/?37300')">
          </div>
      </div> 
    </div>

JS

 var thumbOptions = {
            spaceBetween: 10,
            centeredSlides: true,
            slidesPerView: 5,
            touchRatio: 0.2,
            slideToClickedSlide: true,
            loop: true,
            loopedSlides: 8,
            init: false,
            watchSlidesVisibility: true,
            watchSlidesProgress: true,
            freeMode: true,
        }
        var galleryThumbs = new Swiper(".gallery-thumbs", thumbOptions)

        var containerOptions = {
            grabCursor: true,
            spaceBetween: 10,
            loop: true,
            loopedSlides: 8,
            navigation: {
                nextEl: ".paging.right",
                prevEl: ".paging.left"
            },
            observer: true, 
            observeParents: true,
            init: false,
            pagination: {
              clickable: true
            },
            preventClicks: false,
            preventClicksPropagation: false,
            observer: true, 
            observeParents: true,
            on: {
                touchEnd: function(sw, e) {
                    swiperAllowClick = true;
                    console.log(galleryContainer);
                }
            }
        }
        var galleryContainer = new Swiper(".gallery-container", containerOptions)

        galleryContainer.controller.control = galleryThumbs
        galleryThumbs.controller.control = galleryContainer



                galleryContainer.init()
                galleryThumbs.init()

不胜感激

0 个答案:

没有答案