How to Add Smooth Continuous Scroll to Elementor Image Carousel

If you’ve ever wanted your Elementor Image Carousel to scroll smoothly like premium modern websites, you may have noticed that the default Elementor carousel animation feels slightly jumpy or snaps between slides.

In this tutorial, you’ll learn how to create a smooth continuous scrolling effect for the Elementor Image Carousel widget using a simple combination of custom JavaScript and CSS.

The best part? No plugin required.

What This Smooth Scroll Effect Does

• Creates a seamless continuous scroll effect
• Removes snapping transitions
• Makes the carousel look smoother and more professional
• Works with Elementor’s default Image Carousel widget
• Improves overall UI/UX design

Step 1: Add the JavaScript Code

Add an HTML widget to your Elementor page and paste the code below.

<script>
jQuery(window).on('load', function () {

    setTimeout(function () {

        var swiperEl = document.querySelector(
            '.elementor-widget-image-carousel .swiper-container-initialized, ' +
            '.elementor-widget-image-carousel .swiper'
        );

        if (swiperEl && swiperEl.swiper) {

            var sw = swiperEl.swiper;

            // Smooth continuous autoplay
            sw.params.autoplay.delay = 0;
            sw.params.autoplay.disableOnInteraction = false;
            sw.params.autoplay.pauseOnMouseEnter = false;

            // Scroll speed
            // Higher value = slower movement
            sw.params.speed = 3000;

            sw.params.cssMode = false;

            // Apply linear easing
            sw.wrapperEl.style.transitionTimingFunction = 'linear';

            // Restart autoplay
            sw.autoplay.stop();
            sw.autoplay.start();

            // Keep easing linear during transitions
            sw.on('transitionStart', function () {
                sw.wrapperEl.style.transitionTimingFunction = 'linear';
            });

        }

    }, 1000);

});
</script>

Step 2: Add the CSS Code

Paste this CSS below the JavaScript code inside the same HTML widget or inside Elementor Custom CSS.

/* Remove snapping transition feel */
.elementor-widget-image-carousel .swiper-wrapper{
    transition-timing-function: linear !important;
}

Recommended Elementor Carousel Settings

Adjusting the Scroll Speed

You can easily control the scroll speed by changing this line:

sw.params.speed = 3000;

How This Works

Elementor uses the Swiper.js library internally for its image carousels.

This customization modifies the autoplay behavior by:

• Removing autoplay delay
• Applying linear easing
• Restarting autoplay smoothly
• Eliminating the snapping transition effect

The result is a beautiful continuous scrolling carousel similar to premium modern websites.

Troubleshooting

Carousel Still Snapping?

• Ensure Infinite Loop is enabled
• Ensure Autoplay is enabled
• Clear your website cache
• Clear Elementor cache
• Re-save the page

Code Not Working?

• Make sure jQuery is loaded
• Ensure no optimization plugin is blocking scripts
• Test with another carousel widget

Final Result

After applying both the JavaScript and CSS, your Elementor Image Carousel will smoothly scroll continuously without snapping between slides.

This simple enhancement can instantly make your website look more modern and premium.

Conclusion

Adding smooth continuous scrolling to the Elementor Image Carousel is one of the easiest ways to improve the visual quality of your website.

Whether you’re building a portfolio, agency website, SaaS landing page, fashion brand website, or product showcase, this effect adds a sleek modern touch to your design.