Javascript SwiperJS-上一个和下一个按钮不工作

我正在与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>

模态盒
你好，世界

/path/to/image.png“>
/path/to/image2.png“>
var mySwiper=new Swiper（“.Swiper container”{
//可选参数
方向：'水平'，
循环：对，
中心幻灯片：对，
幻灯片视图：1，
分页：'.swiper分页'，
paginationClickable:“.swiper分页”，
下一个按钮：'.swiper按钮下一个'，
prevButton:“.swiper button prev”，
})

为了初始化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>

var mySwiper=new Swiper（“.Swiper container”{
//可选参数
方向：'垂直'，
循环：对，
//如果我们需要分页
分页：{
el:“.swiper分页”，
},
//导航箭头
导航：{
nextEl:“.swiper按钮下一步”，
prevEl:“.swiper按钮prev”，
},
//如果我们需要滚动条
滚动条：{
el:“.swiper滚动条”，
},
})

---

有人对我可以尝试什么有什么想法吗？我还发现分页按钮没有像示例中那样显示在底部，但与上一个和下一个按钮不工作相比，这不是一个问题。正如我所说，如果我点击并拖动或“滑动”，它会很好地移动到下一张幻灯片，因此我假设它与JS部分相关，但不确定要尝试什么。

在您发布的代码的第一部分中，您必须更改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: {
        el: '.swiper-pagination',
        clickable: true,
      },

和

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

到

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

---

谢谢你的帮助！我的问题最终是，我需要将其添加到我的swiper配置中：

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

---

这是因为swiper位于隐藏模式中。

我们需要在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',
          },
        });

这里是完整的配置

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',
          },
        });

这对我有用