Question

我正在尝试使用Swiper.js（http://idangero.us/swiper/api/）但是当我将它添加到我的项目时，即使我禁用了所有其他JS文件，它也会非常奇怪。例如，如果我以这种方式使用自动播放功能：

var swiper = new Swiper('.swiper-container', {
                autoplay: 2500,
            });

它工作正常，但如果我喜欢这样（就像在文档中）：

var swiper = new Swiper('.swiper-container', {
          autoplay: {
              delay: 2500,
          },
        });

即使我更改了滑块，滑块也会立即开始自动播放。我也无法使导航按钮工作，它们在那里但是当我点击它们时没有任何反应：

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>
<script>
    var swiper = new Swiper('.swiper-container', {
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
</script>

我做错了什么？

Answer 1

在尝试了很长时间之后，我确实找到了我的下一个和上一个按钮的解决方案，因为没有任何工作，我做了类似的工作：

var swiper = new Swiper('.swiper-container', {
                        autoplay: 5000,
                        allowTouchMove : true,
                        parallax: true
                    });

        var mySwiper = document.querySelector('.swiper-container').swiper;

        $('.swiper-button-next').click(function(){
            mySwiper.slideNext();
        });
        $('.swiper-button-prev').click(function(){
            mySwiper.slidePrev();
        });

也许它会帮助另一个与我有同样问题的人。

Swiper.js没有像文档中那样反应

1 个答案: