How to stop swiper slide autoplay on mouse enter and start autoplay on mouse leave? I have tried .stopAutoplay()
and .startAutoplay()
function but not worked for me.
thank you here is code. and i face console error
Uncaught TypeError: swiper .startAutoplay is not a function
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
You need to use the option disableOnInteraction: true
rather than binding the events yourself see here for documentation.
Optionally you can use the following for autoplay start stop
swiper.autoplay.start();
swiper.autoplay.stop();
Edit
Your mistake is how you are getting the instance for swiper. see below for demo
$(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'); }); });
.swiper-slide { text-align: center; }
<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 class="swiper-slide">Slide 4</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>