マウスでスワイパースライドの自動再生を停止するマウスを離したときに自動再生を開始して開始する

Question

マウスでスワイパースライドの自動再生を停止するにはどうすればよいですか？私は.stopAutoplay（）と.startAutoplay（）関数を試しましたが、私のために働いていません。

こちらのコードはありがとうございます。そして私は、コンソールエラーに捕捉されない例外TypeErrorに直面：.startAutoplayは、あなた自身がドキュメントについてはこちらを参照してイベントを結合するのではなくオプションdisableOnInteraction:trueを使用する必要がある機能

var swiper = new Swiper('.swiper-container', { 
    pagination: '.swiper-pagination', 
    paginationClickable: true, 
    nextButton: '.swiper-button-next', 
    prevButton: '.swiper-button-prev', 
    spaceBetween: 0, 
    loop: true, 
    effect: 'slide', 
    longSwipes: true, 
    autoplay:2000, 
    autoplayDisableOnInteraction:true, 
}); 


$(".swiper-container").mouseenter(function(){ 
    swiper.stopAutoplay(); 
}); 

$(".swiper-container").mouseleave(function(){ 
    swiper.startAutoplay(); 
}); 

Answer 1

ではありませんswiper。

documentationは、必要に応じて、あなたはswiperのインスタンスを取得しているかあなたの間違いがある

swiper.autoplay.start();

swiper.autoplay.stop();

編集

を停止する自動再生開始のために以下を使用することができます。同じページに複数のスライダのための一般的なソリューションに

$(document).ready(function() { 
 
    new Swiper('.swiper-container', { 
 
    speed: 400, 
 
    spaceBetween: 100, 
 
    autoplay: true, 
 
    disableOnInteraction: true, 
 
    }); 
 
    var mySwiper = document.querySelector('.swiper-container').swiper 
 

 
    $(".swiper-container").mouseenter(function() { 
 
    mySwiper.autoplay.stop(); 
 
    console.log('slider stopped'); 
 
    }); 
 

 
    $(".swiper-container").mouseleave(function() { 
 
    mySwiper.autoplay.start(); 
 
    console.log('slider started again'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/js/swiper.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/css/swiper.css" rel="stylesheet" /> 
 
<!-- Slider main container --> 
 
<div class="swiper-container"> 
 
    <!-- Additional required wrapper --> 
 
    <div class="swiper-wrapper"> 
 
    <!-- Slides --> 
 
    <div class="swiper-slide">Slide 1</div> 
 
    <div class="swiper-slide">Slide 2</div> 
 
    <div class="swiper-slide">Slide 3</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>

Answer 2

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

$(".swiper-container").hover(function() { 
    (this).swiper.autoplay.stop(); 
}, function() { 
    (this).swiper.autoplay.start(); 
}); 

のデモについては、以下を参照してください。