CODEWITHSUNDEEP
javascriptjqueryswiper.js
Mahmudul Hasan Sohag
Mahmudul Hasan Sohag

Reputation: 1069

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

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

Upvotes: 16

Views: 110124

Answers (11)

user22867743
user22867743

Reputation: 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

Upvotes: 0

BIUBIU UP
BIUBIU UP

Reputation: 45

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

Upvotes: 0

Serg Fortoo
Serg Fortoo

Reputation: 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!

enter image description here

Upvotes: 0

Umair Qazi
Umair Qazi

Reputation: 385

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

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

Upvotes: 22

Piotr Kozłowski
Piotr Kozłowski

Reputation: 424

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

Upvotes: 3

Michael Bolli
Michael Bolli

Reputation: 2149

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>

Upvotes: 1

Ahmad Mobaraki
Ahmad Mobaraki

Reputation: 8160

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>

Upvotes: 0

markcanals
markcanals

Reputation: 71

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

Upvotes: 5

Muhammad Omer Aslam
Muhammad Omer Aslam

Reputation: 23738

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>

Upvotes: 24

smac89
smac89

Reputation: 43068

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

Upvotes: 2

Mitul Modi
Mitul Modi

Reputation: 111

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.

Upvotes: 11

Related Questions