Add a continuously scrolling carousel with images to your website
Having the ability to create your own scrolling carousel that automatically slides across the page at a steady rate can open up design options for you. This type of carousel works great for affiliate logos, awards, testimonials, or even product images.
This tutorial uses the built in testimonial carousel so you can customize it to add in additional text, adjust the number of items showing and spacing between. It only requires a little bit of custom code to get the scrolling working. After that you just add the images and settings you want.
Example
Code Tutorial
Step 1: Add a Testimonial Carousel to the page
Add a testimonial carousel to the page by dragging it onto the page.
Step 2: Adjust the Styling of the Carousel
You will likely want to remove the content, name, and title if you want just images scrolling. After this, adjusting the slides per view will adjust how many images are displaying onscreen at a time. Additionally you may want to adjust the size of the image in the style settings as well as turning off the arrows and dots.
Step 3: Add the Code
Add this code to the custom CSS section of the carousel and it should start sliding on it’s own.
.elementor-testimonial__name {
margin-top: -30px;
}
selector .swiper-wrapper{
-webkit-transition-timing-function: linear !important;
transition-timing-function: linear !important;
}
.elementor-testimonial__image img {
height: 100% !important
}
selector a{
color: black
}
Bonus Tip: Settings a Custom Class
You can put this code in a global place like Elementor settings or your site customizer to target all testimonial carousels. Additionally, you can add a class to each of the testimonial carousels that you want to target and then modify the code to add that class in front of each item and instead of selector.