在swiper.js上,添加“停止播放”按钮

时间:2018-09-14 05:33:37

标签: javascript jquery swiper

在swiper.js上,我尝试在自动滑块上添加播放,停止按钮。 所以我尝试了

$(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> 

但是停止播放按钮对我不起作用。 我错过了什么?有人知道吗?
请帮忙。

1 个答案:

答案 0 :(得分:0)

使用分配给刷卡器的变量。

var homeSwiper = new Swiper('。home_top_swiper',{....

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

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