javascript 鼠标进入时停止滑动自动播放并在鼠标离开时开始自动播放

Stop swiper slide autoplay on mouse enter and start autoplay on mouse leave

提问by Mahmudul Hasan Sohag

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.

如何在鼠标进入时停止 swiper 滑动自动播放并在鼠标离开时开始自动播放？我已经尝试过.stopAutoplay()并且.startAutoplay()可以正常工作，但对我不起作用。

thank you here is code. and i face console error

谢谢这里是代码。我面临控制台错误

Uncaught TypeError: swiper .startAutoplay is not a function

未捕获的类型错误：swiper .startAutoplay 不是函数

 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();
});

回答by Muhammad Omer Aslam

You need to use the option disableOnInteraction: truerather than binding the events yourself see here for documentation.

您需要使用该选项disableOnInteraction: true而不是自己绑定事件，请参见此处的文档。

Optionally you can use the following for autoplay start stop

您可以选择使用以下内容进行自动播放开始停止

• swiper.autoplay.start();

• swiper.autoplay.stop();

• swiper.autoplay.start();

• swiper.autoplay.stop();

Edit

编辑

Your mistake is how you are getting the instance for swiper. see below for demo

您的错误在于您如何获取 swiper 的实例。见下面的演示

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

回答by Mitul Modi

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.

同一页面上多个滑块的通用解决方案。

回答by smac89

In vuejs (with vue-awesome-swiper), I had to wrap the swipercomponent with a divand then added the event listeners to the div.

在 vuejs (with vue-awesome-swiper) 中，我不得不swiper用 a包装组件，div然后将事件侦听器添加到 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

将事件侦听器直接放在组件上不起作用

回答by markcanals

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();
    });
});

回答by Ahmad Mobaraki

In case you are using vuejs directive for swipper : vue-awesome-swiper

如果您对 swipper 使用 vuejs 指令：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>