swiper按鈕點擊無效及控制器無效問題

 

 

 

點擊箭頭圖片切換的同時，下面小圖標也會隨着切換，同理下面小圖標切換時，上面也隨着滾動。

示例代碼以下：

   
 <!-- Swiper -->
    <div class="swiper-container gallery-top">
        <div class="swiper-wrapper">
           <div class="swiper-slide" style="background-image:url(img/nature1.jpg)"></div>
            <div class="swiper-slide" style="background-image:url(img/nature2.jpg)"></div>
            <div class="swiper-slide" style="background-image:url(img/nature3.jpg)"></div>
            <div class="swiper-slide" style="background-image:url(img/nature4.jpg)"></div>
            <div class="swiper-slide" style="background-image:url(img/nature5.jpg)"></div>
        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"></div>
    </div>
    <div class="swiper-container gallery-thumbs">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-image:url(img/nature1.jpg)"></div>
            <div class="swiper-slide" style="background-image:url(img/nature2.jpg)"></div>
            <div class="swiper-slide" style="background-image:url(img/nature3.jpg)"></div>
            <div class="swiper-slide" style="background-image:url(img/nature4.jpg)"></div>
            <div class="swiper-slide" style="background-image:url(img/nature5.jpg)"></div>
        </div>
    </div>

    <!-- Swiper JS -->
    <script src="../dist/js/swiper.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
    var galleryTop = new Swiper('.gallery-top', {
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
 //改成：

        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
         },

        spaceBetween: 10,
    });
    var galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: 'auto',
        touchRatio: 0.2,
        slideToClickedSlide: true
    });
    galleryTop.params.control = galleryThumbs; //改成controller
    galleryThumbs.params.control = galleryTop;//改成controller </script>

 

 可是，在使用時，點擊箭頭或者下面小圖標確無效。

修改了以上紅色地方後，就生效了。