Elementor Autoplay Carousel Only When In the Viewport

Elementor Autoplay Carousel Only When In the Viewport

First, add the Elementor Autoplay Carousel Only When In the Viewport code to your project

If you want to apply this across multiple pages, paste the code below into an Elementor Custom Code snippet. For a single page, you can paste it into an HTML element (ideally placed near the carousel) on that specific page.

Now, add a class name to the autoplaying carousel Assign the class name autoplayInView to all the carousels you want to autoplay only when they are visible. You can do this under Advanced > CSS Classes.

Keep autoplaying after starting

The code ensures that carousels autoplay only when they are in the viewport; they will stop when out of view.

To modify this behavior so the carousels continue autoplaying after they start (even if the user scrolls away), remove this line from the code:

swiperElement.swiper.autoplay.stop(); /* Remove this line to keep autoplaying when the carousel is out of the viewport */

Do you need an expert? HIRE US NOW!