Elementor Autoplay Carousel Only When In the Viewport

In this tutorial, I will show you how to make the Elementor carousel autoplay only when it is in the viewport.

So when the user hasn't yet scrolled to it, the carousel is patiently waiting on slide 1. As soon as the user reaches the carousel, it starts autoplaying.

You will be certain that your Elementor carousel will autoplay only when it is in the viewport. This helps to decrease the chances of users missing the first slide while scrolling through your page.

Optionally, it stops autoplaying when the user scrolls away again.

This will work on the following Elementor carousels and sliders:

• Elementor Carousel (the new one where each slide is a container)
• Elementor Loop Carousel
• Elementor Image Carousel
• Elementor Testimonial Carousel
• Elementor Review Slider
• Elementor Slides Element

Here it what we are creating:

Back to the current tutorial.

Let's get started!

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

If you want to use this on multiple pages, copy paste the code below into an Elementor Custom Code snippet. Otherwise, you can copy paste it on the page needed only, in an HTML element (which can be anywhere on the page, ideally near the carousel).

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Autoplay Carousel Only When In the Viewport tutorial 
 * Found at this URL https://element.how/elementor-autoplay-carousel-only-when-in-the-viewport/ 
 */ 
</script>

Now, add a class name to the autoplaying carousel

Give all the carousels you want to autoplay only when in view the class name autoplayInView under Advanced > CSS Classes.

Keep autoplaying after starting

The code will make it so the carousels only autoplay when in the viewport, otherwise they stop.

To change this, and have them keep autoplaying after they start (when the user reaches them), delete this line of the code:

swiperElement.swiper.autoplay.stop(); /* keep this line to stop autoplaying when the carousel goes outside the viewport again, otherwise delete */

Finally, enjoy your Elementor autoplaying in the viewport carousel!

I hope you find this tutorial helpful!

Cheers!