This Infinite Autoscroll Carousel is a great way to showcase your logos – it’s simple to set up and easy to use. Plus, it looks great in your WordPress website!
If you’re looking to create a scrolling logo gallery in your website, then this video is for you! Watch as I walk you through the steps of creating this carousel in Elementor WordPress, and see it in action!
𝗧𝗮𝗯𝗹𝗲 𝗼𝗳 𝗖𝗼𝗻𝘁𝗲𝗻𝘁𝘀 ✍ :
First, log in to your WordPress website, then go to pages.
I want to create this design on our about page.
Now click edit with elementor, then scroll down.
I want to create this section before the footer section.
Click this plus icon and select a single column.
I want to add some padding only bottom, unlink and put value[10]
Now, change color; click the style tab and change color from white to dark.
First, add a heading widget, then change the font color to white and set the font size [38]
Go back to the content tab and change text alignment [center], then add heading text
I want to write ”our brand.” then add a testimonial carousel
first, delete the default item
Now click item 1 and remove the image and other default text because we add the brand logo.
I’m going to add use IMG tag in HTML, be patient.
I’m uploading all resource files in google drive and the link in the description. Go to the folder, open the image tag.txt file, select all, and copy.
Now go back to our WordPress and paste it here
okay, now the logo appears on our site because I upload the logo png file on our WordPress media library
You can create and upload your brand logo and generate an image address.
I’m uploading four logos; that’s why I created four items.
And then paste the image code snippet before we copy.
Now go to the second item, select only the image (URL), go to the media library, click the 2nd image logo, copy the image address, and then go back to the design page and paste it here.
now you can change the image URL in the same way
after adding all items, go to the main part of this tutorial. Please focus now.
📌change some settings.
✍skin(default);
✍Layout (image line);
✍Alignment (center);
✍slide per view (4); (this means we have to show four logos on our slider).
✍slider to scroll [1];
✍✍✍Go to Additional Options
✍Pagination [none];
✍Transition duration [3600];
✍Autoplay [on];
✍Autoplay speed [0];
✍Infinite loop [on];
✍Pause on hover [off];
✍Pause on interaction [off];
✍Image size (we apply custom size in the image tag.
✍That’s why there is no need to change this setting and the active lazyload option.
Now click ‘update’ and go to the about page and see our logo appear on our site, but sliders automatically stop and play after a few moments.
Now we need some CSS code to help infinite this loop without breaking.
Go to our folder, open the CSS-code text file, copy all the code snippets, go back to our elementor page, and click this pencil icon.
Now go to the Advanced tab, open custom CSS, then paste it here.
Now click update and go to our page, then reload
Now, we are creating an infinite auto carousel
I want to add CSS tricks to look more beautiful; go to the folder and open the gradient animation text file.
Now open and copy all the code snippets, go back to our elementor page and then go to the advanced tab, open custom CSS, and directly paste it here.
(boom!)
You can create your gradient color, and I’ve uploaded these tricks in another video. If you are interested, click the link in the eye button, so that’s it, guys.
