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

Question

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

Saprophyte

there is no option like autoplayDisableOnInteraction but disableOnInteraction . – Cornhusking

Answer 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>

Cornhusking

do not work for me. face console error Cannot read property 'stop' of undefined – Saprophyte

add console.log(swiper) just before you call start stop what does it print in console – Cornhusking

I add this console.log('Enter'); This work fine but see undefined method 'stop' and 'start' – Saprophyte

just updated my answer and added the code snippet look closely how you have to get the instance for the swiper, that was your mistake @MahmudulHasanSohag. hope it solves your problem – Cornhusking

Thanks @ Muhammad Omer Aslam , It's work for me I face another problem. I use wordpress post query and for that many swiper-container are print. First container's autoplay stop when i mouse hover any swiper container. But i want it each specific container. how I can i solve it – Saprophyte

can you create another post for this problem with your existing code and tag me there – Cornhusking

Let us continue this discussion in chat. – Saprophyte

sorry i am out currently cant chat thats y asked you to add another post and tag me ,will see when i come back home – Cornhusking

am getting error Uncaught TypeError: Cannot read property 'autoplay' of undefined – Gorga

There isnt any error in the example snippet above. if you are talking about your code please add your question by creating a post @Gorga – Cornhusking

Answer 2

According to the documentation of swiper.js version 8 https://swiperjs.com/swiper-api#autoplay

autoplay: {
    disableOnInteraction: false,
    pauseOnMouseEnter: true,
},

Rap

that works like a charm – Tibold

Answer 3

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.

Bergeron

This is the best, most simple and straightforward answer in my opinion. Thanks – Schoolmarm

But, I just realized, it doesn't pause my thumbnails below the main slider. – Schoolmarm

@JeremyCaris Probably because they are not the children of the .swiper-container element. – Apis

Answer 4

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

Kimberliekimberlin

This answer pauses the main slider and thumbnails in my situation. Thanks – Schoolmarm

Thanks, Mark, this is the best solution. As the Elementor has added improved asset loading, it only works inside $(window).on('load', function () {. Reference: github.com/elementor/elementor/issues/13268 – Lusty

Answer 5

New parameter has been added to Swiper v6.6.0 (pauseOnMouseEnter), so there is no need for a workaround from now: https://swiperjs.com/swiper-api#autoplay

Annieannihilate

This should be the proper way from now on. Option named pauseOnMouseEnter has been added under Autoplay property. – Latent

Answer 6

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

Foliole

Answer 7

For Vue 3 with vue components from swiper/vue:

<template>
  <swiper
      :slides-per-view="1"
      @swiper="onSwiper"
      @mouseenter="() => this.swiper.autoplay.stop()"
      @mouseleave="() => this.swiper.autoplay.start()"
  >
    <template v-for="pic in pictures">
      <swiper-slide>
        <figure>
          <div v-html="pic.html"></div>
          <figcaption>{{ pic.title }}</figcaption>
        </figure>
      </swiper-slide>
    </template>
  </swiper>
</template>

<script>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';

// Import Swiper styles
import 'swiper/swiper.scss';

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      swiper: null,
    }
  },
  methods: {
    onSwiper(swiper) {
      this.swiper = swiper;
    },
  },
}
</script>

Heydon

:autoplay="{ delay: 2000, disableOnInteraction: true, pauseOnMouseEnter: true, }" pauseOnMouseEnter: true, If you use this simply stop – Coccidioidomycosis

Answer 8

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>

Anuria

Answer 9

It works for me like this:

three conditions

1. My Swiper 3.4.2

2. Slider in tabs (5pcs)

3. Scroll arrows are inside the slider

   // showed initialization as an example, in my case, to initialize each of the 5 sliders, such code in each tab.
   var swiper = new Swiper('#tab-<?php echo $count; ?> .swiper-container', {
      mode: 'horizontal',
      slidesPerView: 4,
      spaceBetween: 30,
      nextButton: '#five_modules_tabs #tab-<?php echo $count; ?> .swiper-button-next',
      prevButton: '#five_modules_tabs #tab-<?php echo $count; ?> .swiper-button-prev',
      breakpoints: {
         // when window width is <= 410px
         410: {
           slidesPerView: 1.1,
           spaceBetween: 4
         },
         // when window width is <= 430px
         430: {
            slidesPerView: 1.11,
            spaceBetween: 4
         },
         // when window width is <= 460px
         460: {
            slidesPerView: 1.12,
            spaceBetween: 4,
            nextButton: '',
            prevButton: '',
         },
         // when window width is <= 640px
         640: {
            slidesPerView: 2,
            spaceBetween: 4
         },
         // when window width is <= 767px
         767: {
            slidesPerView: 3,
            spaceBetween: 4
         },
         // when window width is <= 991px
         991: {
            slidesPerView: 3,
            spaceBetween: 12
         },
         // when window width is <= 1199px
         1199: {
            slidesPerView: 3,
            spaceBetween: 15
         }
      },
      pagination: '#five_modules_tabs #tab-<?php echo $count; ?> .swiper-pagination',
      paginationClickable: true,
      autoplay: 1000,
      autoplayDisableOnInteraction: false, // Does not work
      //loop: true, //this hinder autoplay
      observer: true,
      observeParents: true,
      observeSlideChildren: true
   });
   

But for this code .on("click") to work without errors, you need to exclude loop: true

// restart autoplay after switching tabs
$("#five_modules_tabs .nav-tabs li").on("click", function(e) {
  var gallerySwiper = $('#five_modules_tabs .swiper-container');
  $.each(gallerySwiper, function( index, value ) {
    value.swiper.stopAutoplay();
    value.swiper.startAutoplay();
  });
});

loop: true, - This hinder autoplay

Instead of a non-working autoplayDisableOnInteraction: true, stops the slider on hover.
You need to stop when hovering on any of these blocks (.swiper-container, .swiper-button-prev, .swiper-button-next, .swiper-pagination) === ('#five_modules_tabs .swiper-container')

All blocks are inside .swiper-viewport

$('#five_modules_tabs .swiper-container').each(function(index, value) {
  $('#five_modules_tabs .swiper-viewport').hover(function() {
    value.swiper.stopAutoplay();
  }, function() {
    value.swiper.startAutoplay();
  });
});

Look at the picture!

Jaundiced

Answer 10

Use the web Component of swiper(>9.0):

<swiper-container autoplay-deplay=2000 
       autoplay-disable-on-interaction="false" autoplay-pause-on-mouse-enter="true">
       <swiper-slide class="swiper-slide">Slide 1</swiper-slide>
       <swiper-slide class="swiper-slide">Slide 2</swiper-slide>
       <swiper-slide class="swiper-slide">Slide 3</swiper-slide>
</swiper-container>

can also use:

const swiper = new Swiper('.swiper', {
 autoplay: {
   delay: 2000,
   disableOnInteraction: false,
   pauseOnMouseEnter: true
 },
});

Pipe

Answer 11

Inside the autoplay property, you can add the following parameter set to true:

new Swiper(".mySwiper", {
  autoplay: {
    delay: 5000,
    disableOnInteraction: false,
    pauseOnMouseEnter: true,
  },
}

Reference from the official documentation

Steam