Swiper stop autoplay

  • License Text
  • About Us
  • Copyright
  • Terms & Conditions
  • Contact Us
  • Ask Question
  • Submit Answer
Type your search query and hit enter:
All Rights ReservedView Non-AMP Version
Type your search query and hit enter:
  • License Text
  • About Us
  • Copyright
  • Terms & Conditions
  • Contact Us
  • Ask Question
  • Submit Answer
  • Homepage
  • jQuery
Categories: jQuery

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[]; }];

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; }
Slide 1
Slide 2
Slide 3
Slide 4
admin
Next C/C++ Sockets: IPv6 TCP connection fails if I do anything before it »
Previous « jQuery file upload plugin, multiple files and form data
Share
Published by
admin
Tags: javascriptjqueryswiper

    Related Post

  • How can I stop loaders animation after 3 seconds

Recent Posts

  • JavaScript

React array map inside map value not rendering

I have an object Array list and this array list includes duplicate values. So I

2 days ago
  • JavaScript

Should properties of constants be capitalized? [closed]

I know that it is conventional to capitalize constant values in programming, but would you

3 days ago
  • JavaScript

How to looping trough an array of object when array name is not consistent?

Consider below example: const obj ={ price:[{multiple items},{multiple items}], name:"", id:"", } i want to

3 days ago
  • JavaScript

Remove input value on backspace keyup

I have a small canonical lottery search form comprising of 6 input fields. Currently when

3 days ago
  • JavaScript

How can i do title event with html,css,js

I want the css codes of the blog1popup class to change when the image is

3 days ago
  • JavaScript

Best practices writing JavaScript that uses AJAX call to decide if default action should be prevented

I'm using JavaScript and jQuery to write a handler for my form being submitted. Based

3 days ago
  • License Text
  • About Us
  • Copyright
  • Terms & Conditions
  • Contact Us
  • Ask Question
  • Submit Answer
All Rights ReservedView Non-AMP Version
  • t
  • L

This website uses cookies.

Accept

Video liên quan

Chủ Đề