June 2, 2023

Autoscroll Carousel Elementor Pro CSS Guide

Play Video

What is this tutorial about?

Autoscroll Carousel Elementor Pro CSS is a powerful feature that can significantly enhance the user experience on your WordPress website. This tutorial will guide you through the process of enabling smooth autoscrolling on various widgets, transforming the way your audience interacts with your content. Whether you’re working with image carousels, testimonial carousels, loop grid carousels, or sliders, this guide by Web Squadron will help you create a seamless browsing experience for your visitors.

Tutorial Steps

  1. Add Image Carousel Widget
  2. Remove Navigation:
    Start by removing the navigation from your image carousel and testimonial carousel.
  3. Set Slides:
    For the image carousel, set it to show any number of slides you prefer. However, ensure that the slides to scroll is set to one.
  4. Adjust Additional Options:
    In the additional options, leave the autoplay on. The autoplay speed should be set to zero, and the animation speed should be set to 3500.
  5. Add Custom CSS:
    Navigate to custom CSS and add the provided CSS code. This will enable smooth scrolling.

    selector .swiper-wrapper{
      transition-timing-function: linear !important; 
  6. Adjust Speed:
    If you find the scrolling too slow, you can adjust the speed in the additional options.
  7. Repeat for Other Carousels:
    Repeat these steps for the testimonial carousel, loop grid carousel, and slider.

Benefits of the Tutorial

Implementing an autoscroll carousel on your WordPress site can enhance user experience by providing a smooth, continuous flow of content. This feature is particularly useful for showcasing a series of images, testimonials, or products, allowing users to easily digest the information without manual scrolling.

Use Cases for this Tutorial

  • E-commerce Websites:
    Displaying product carousels on the homepage or product pages.
  • Blogs and News Sites:
    Showcasing the latest posts or trending articles.
  • Portfolio Websites:
    Displaying a series of work samples or client testimonials.

Required Resources

Elementor Logo
Free Options
Credit to Web Squadron
Web Squadron is a popular YouTube channel dedicated to providing informative tutorials, tips, and insights on web development and design. With a strong focus on WordPress and website builders like Bricks Builder, the channel aims to help users of all skill levels, from beginners to advanced developers, create and optimize their websites. By offering easy-to-understand, step-by-step guidance, Web Squadron provides practical and valuable content.
Autoscroll Carousel Elementor Pro CSS Guide
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.