问题
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();
});
回答1:
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>
回答2:
var swiper = new Swiper('.swiper-container', {
....
...
....
});
$(".swiper-container").hover(function() {
(this).swiper.autoplay.stop();
}, function() {
(this).swiper.autoplay.start();
});
generic solution for multiple sliders on same page.
回答3:
For several instances the only code works is the following:
$(".swiper-container").each(function(elem, target){
var swp = target.swiper;
$(this).hover(function() {
swp.autoplay.stop();
}, function() {
swp.autoplay.start();
});
});
回答4:
In vuejs (with vue-awesome-swiper), I had to wrap the swiper
component with a div
and then added the event listeners to the div.
<v-flex @mouseenter="$refs.swiperRef.swiper.autoplay.stop()"
@mouseleave="$refs.swiperRef.swiper.autoplay.start()">
<swiper :options="swiperOptions"
ref="swiperRef">
<swiper-slide v-for="(product, index) in products"
:key="index">
<!-- -->
</swiper-slide>
</swiper>
</v-flex>
Putting the event listeners on the component directly did not work
回答5:
In case you are using vuejs directive for swipper : vue-awesome-swiper
<div class="swiper-container" v-swiper:mySwiper="swiperOptions" @mouseenter="stopSwip($event)" @mouseleave="startSwip($event)">
....
</div>
<script>
export default {
methods: {
stopSwip(event) {
event.target.swiper.autoplay.stop();
},
startSwip(event) {
event.target.swiper.autoplay.start();
},
},
}
</script>
来源:https://stackoverflow.com/questions/47238245/stop-swiper-slide-autoplay-on-mouse-enter-and-start-autoplay-on-mouse-leave