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

8ftvxx2r 于 2023-05-17 发布在 jQuery

关注(0)|答案(7)|浏览(171)

我正在使用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部分有关，但不确定该尝试什么。

jquery

来源：https://stackoverflow.com/questions/62288058/swiperjs-previous-and-next-buttons-not-working

7条答案

按热度按时间

ws51t4hk1#

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

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

这是由于刷卡器在隐藏的模态内。

赞(0）回复(0）举报 2023-05-17

yqhsw0fo2#

以这种方式连接滑块，一切都将工作！

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

赞(0）回复(0）举报 2023-05-17

jjhzyzn03#

在你发布的代码的第一部分中，你必须更改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',
  }

赞(0）回复(0）举报 2023-05-17

snz8szmq4#

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

这对我很有效

赞(0）回复(0）举报 2023-05-17

njthzxwz5#

就写const { swiper } = useSwiper();
就这样，谢谢

赞(0）回复(0）举报 2023-05-17

egdjgwm86#

我也有这个问题，但在这个场景中，我正在操作DOM来改变全屏滑动幻灯片显示。我尝试了配置方法，但没有工作。我在一个小框架中有一个图像网格，当我单击其中一个时，显示全屏滑块并跳到图像。

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方法，它解决了我在类构造函数中的问题。如果你有类似的情况，就给予吧。

赞(0）回复(0）举报 2023-05-17

tvz2xvvm7#

我的导航按钮在加载页面后被禁用。所以添加了observer: true属性。现在正如预期的那样工作。

var swiper = new Swiper(".MySwiper", {
slidesPerView: 1,
spaceBetween: 15,
centeredSlides: true,
autoplay: false,
observer: true, // adding this solve my issue
navigation: {
  nextEl: ".swiper-button-next",
  prevEl: ".swiper-button-prev"
 }
});

赞(0）回复(0）举报 2023-05-17

我来回答

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

7条答案

相关问题

热门标签

最新问答