Elementor Smooth Scrolling Media Carousel 

The Elementor Smooth Scrolling Media Carousel is a powerful and visually appealing solution that elevates the media presentation on your website to new heights. This overhauls the way you present pictures, videos, and other media components on your website with its clean style and smooth scrolling capability.

Whether you’re a professional photographer, a creative agency, or a content provider, the Elementor Smooth Scrolling Media Carousel provides your visitors with a magnificent and engaging browsing experience.

This tutorial will tell you how to make the Elementor media carousel infinite scroll. Ideal to showcase your client logos. (Example Above)

  1. Place the media carousel on the page where you wish to have it.
  2. Place as many images as you wish (7 in my example)
  3. Set the slides per view to however many images you want to show at once. Example (7)
  4. Set the slide to scroll to (1)
  5. Height 60 pixels.
  6. Width 100% of the section.
  7. Go to Advanced Tab > Custom CSS
elementor-advanced-tab
scroll

Adding CSS Code

Place the following code in the CSS area (On each scroll, if you have multiple)
				
					selector .swiper-wrapper{
  -webkit-transition-timing-function: linear !important;
  transition-timing-function: linear !important; 
}
				
			
custom-css

Tweak The Settings

Under Additional Options, you can control the speed of the scroll, autoplay and more. The settings set below, makes the media carousel smoothing scroll infinitely.

scroll-additional-options

Once all done and set, click the update button. Then visit your page to have a look.

Leave a Reply

Share This

Please Donate

If my how-to tutorials helped you, please consider making a donation. ☕ ☕

chkserv logo

Need affordable cPanel hosting?