Swiper.js не реагирует как в документации - PullRequest
Новая
       18

Swiper.js не реагирует как в документации

0 голосов
/ 31 мая 2018

Я пытаюсь использовать 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>

Что я сделал не так?

1 Ответ

0 голосов
/ 04 июня 2018

Я нашел решение для своих следующих и предыдущих кнопок после долгой попытки, так как ничего не помогло, я обошел вокруг так: 

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();
        });

Может быть, это поможет другому человеку, которыйесть такая же проблема, как у меня.

...