javascript - On swiper.js, add stop, play button - Stack Overflow

admin管理员组

文章数量:1415467

On swiper.js, I try to add play, stop button on auto slider. So I tried like this

$(function() {
     var homeSwiper = new Swiper('.home_top_swiper', {
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev', 
        paginationClickable: true,
        autoplay: 3000,
        autoplayDisableOnInteraction: true,
        loop: true,
        autoHeight: true
    });

    $(".swiper-button-pause").click(function(){
                Swiper.autoplay.stop();
            });

            $(".swiper-button-play").click(function(){
                Swiper.autoplay.play();
            });
});

<div class="home_top_swiper">
    <div class="swiper-wrapper"> 
        <div class="swiper-slide">11 </div>
        <div class="swiper-slide">22 </div>
        <div class="swiper-slide">33 </div> 
    </div>

    <div class="swiper-button-prev">prev</div>
    <div class="swiper-button-next">next</div>

    <div class="swiper-button-play">play</div>
    <div class="swiper-button-pause">stop</div>

</div> 

But stop,play button is not work for me. What did I missed it? Anyone know?
Please help.

On swiper.js, I try to add play, stop button on auto slider. So I tried like this

$(function() {
     var homeSwiper = new Swiper('.home_top_swiper', {
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev', 
        paginationClickable: true,
        autoplay: 3000,
        autoplayDisableOnInteraction: true,
        loop: true,
        autoHeight: true
    });

    $(".swiper-button-pause").click(function(){
                Swiper.autoplay.stop();
            });

            $(".swiper-button-play").click(function(){
                Swiper.autoplay.play();
            });
});

<div class="home_top_swiper">
    <div class="swiper-wrapper"> 
        <div class="swiper-slide">11 </div>
        <div class="swiper-slide">22 </div>
        <div class="swiper-slide">33 </div> 
    </div>

    <div class="swiper-button-prev">prev</div>
    <div class="swiper-button-next">next</div>

    <div class="swiper-button-play">play</div>
    <div class="swiper-button-pause">stop</div>

</div> 

But stop,play button is not work for me. What did I missed it? Anyone know?
Please help.

• javascript
• jquery
• swiper.js

Share Improve this question Follow edited Sep 14, 2018 at 5:51 samuel asked Sep 14, 2018 at 5:33 samuelsamuel 9911 gold badge22 silver badges1313 bronze badges 1

• could you solve it yet ? – Towkir Commented Nov 19, 2018 at 1:46

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

Use the variable you assigned swiper to.

var homeSwiper = new Swiper('.home_top_swiper', {
  // …

  $(".swiper-button-pause").click(function(){
    homeSwiper.autoplay.stop();
  });

  $(".swiper-button-play").click(function(){
    homeSwiper.autoplay.start();
  });
}

本文标签： javascriptOn swiperjsadd stopplay buttonStack Overflow