SwiperJS - 上一個和下一個按鈕不起作用

Question

我正在使用 SwiperJS (www.swiperjs.com)，我遇到了滑動到下一張照片的問題，但上一個和下一個按鈕沒有。 我已經查看了我可以在這里找到的每一篇文章以及遵循他們的文檔，但仍然沒有任何運氣。

    <div id="openModal" class="modalDialog" style="display: none;">
    <div class="modal-content">
        <a href="#close" title="Close" class="close" onclick="$('#openModal').hide()">X</a>
        <h2>Modal Box</h2>
        <p>Hello world</p>
        <script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
        <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
        <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
        <!-- Slider main container -->
        <div class="swiper-container">
            <!-- Additional required wrapper -->
            <div id="swiper" class="swiper-wrapper">
                <!-- Slides -->
                <div class="swiper-slide"><img src="http://<server>/path/to/image.png"></div>
                <div class="swiper-slide"><img src="http://<server>/path/to/image2.png"></div>
            </div>
            <!-- If we need pagination -->
            <div class="swiper-pagination"></div>

            <!-- If we need navigation buttons -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

            <!-- If we need scrollbar -->
            <div class="swiper-scrollbar"></div>
        </div>
        <script>
        var mySwiper = new Swiper ('.swiper-container', {
            // Optional parameters
            direction: 'horizontal',
            loop: true,
            centeredSlides: true,
            slidesPerView: 1,

            pagination: '.swiper-pagination',
            paginationClickable: '.swiper-pagination',
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
        })
        </script>

為了初始化 Swiper JS，我也從他們的網站上嘗試過：

  <script>
  var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    direction: 'vertical',
    loop: true,

    // If we need pagination
    pagination: {
      el: '.swiper-pagination',
    },

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

    // And if we need scrollbar
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })
  </script>

有人對我可以嘗試什么有任何想法嗎？ 我還發現分頁按鈕沒有像他們的示例那樣顯示在底部，但與上一個和下一個按鈕不起作用相比，這不是一個問題。 就像我說的，如果我單擊並拖動或“滑動”，它會很好地移動到下一張幻燈片，所以我假設它與 JS 部分有關，但不確定要嘗試什么。

Answer 1

感謝您的幫助：我的問題最終是我需要將其添加到我的 swiper 配置中：

            observer: true,
            observeParents: true,
            parallax:true,

這是由於 swiper 位於隱藏的模式中。

Answer 2

在您發布的第一部分代碼中，您必須更改 JS

<script>
  var mySwiper = new Swiper ('.swiper-container', {
      // Optional parameters
      direction: 'horizontal',
      loop: true,
      centeredSlides: true,
      slidesPerView: 1,

      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }
  })
  </script>

箭頭和分頁都應該起作用。

我改變的是

pagination: '.swiper-pagination',
paginationClickable: '.swiper-pagination',

至

 pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },

和

nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',

至

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

Answer 3

以這種方式連接 slider，一切正常！

import { Swiper, Parallax, Navigation} from 'swiper'
Swiper.use([ Parallax, Navigation ])

document.addEventListener('DOMContentLoaded', () => {
  const swiper = new Swiper('.swiper-container', {
    // Optional parameters
    direction: 'horizontal',
    loop: false,
    speed: 2400,
    parallax: true,
    loop: false,

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

Answer 4

只是我們需要在 swiper js 配置中添加以下內容

observer: true,
observeParents: true,
parallax:true,

所以這里是完整的配置

var swiper = new Swiper('.relatedproducts', {
            
              observer: true,
            observeParents: true,
            parallax:true,
          slidesPerView: 6,
          loop:true,
          autoplay: true,
          simulateTouch:true,
          navigation: {
            nextEl: '.relatedproducts .swiper-button-next',
            prevEl: '.relatedproducts .swiper-button-prev',
          },
        });

這對我有用

Answer 5

只需寫它const { swiper } = useSwiper();

而已。 謝謝你

Answer 6

我也有這個問題，但在這個場景中，我正在操縱 DOM 來改變全屏滑動幻燈片顯示。 我嘗試了配置方法，但沒有奏效。 我在一個小框架中有一個網格圖像，當我單擊其中一個時，顯示全屏 slider 並跳轉到圖像。

this.imgs.forEach(img=>{
    img.onclick = () => {
        document.body.appendChild(this.gallery);
        setTimeout(()=>{
            this._swiper.slideTo(this.photos.indexOf(img.related) + 1); 
            // must bind method here
            // otherwise after dismiss swiper next prev will not fire
            this.swiper_prev.onclick = this._swiper.slidePrev.bind(this._swiper);
            this.swiper_next.onclick = this._swiper.slideNext.bind(this._swiper);
        }, 0)
    }
});

注意setTimeout 0方法，它解決了我在 class 構造函數中的問題。 如果您處於類似情況，請給它一個 go。