Create a Logo Carousel in Breakdance Builder

Picture this. You’re creating an event page on your site and you want to show off your cool sponsors. Or maybe you want to showcase your diverse brand partnerships in your online store. Perhaps, you’re a service provider keen to display your growing list of happy customers.

All these scenarios need a stylish, smooth logo carousel.

In this guide, I will walk you through creating an infinite logo carousel using Breakdance. Here, you’ll learn how to display logos in a professional way.

By the end, you should be able to create a logo carousel that will keep sliding across your screen, giving that eye-catching, never-ending visual effect. It looks like this:

Making a Logo Carousel with Infinite Scroll in Breakdance

1) Create New Page

Let’s start off with a new page. Add a title and save. Then, open it in the Breakdance editor.

2) Add Advanced Slider

Add a section. Then, search and click the ‘Advanced Slider’ on the left-hand side of the editor. This will be the foundation of our logo carousel.

3) Change the Style Settings

Select the ‘Advanced Slider’ element and tap the Style tab. Go to Settings > Slider. Then, change the effect to ‘Slide.’

4) Set the Autoplay and Speed 

Under the slider settings, enable the ‘Infinite’ and ‘Autoplay.’ This will keep our logo carousel going and not stop at the end of the slide.

Next, go to the autoplay settings. Set the speed to your liking. Note that this speed represents how long it's going to wait between each slide. 

Here, I set it to zero ms because I want the logos to keep moving, with no pauses.

Back to the slide settings, set the speed to 5000 ms. Note that the higher the speed, the slower the slide will move. So, by setting it to 5 seconds, the slider takes its sweet time, completing in 5 seconds.

5) Set the View Per Slide

Adjust how many logos appear depending on the device. 

In the advanced settings, set your view per slide. For a phone view, I recommend setting view per slide to 2. For desktops, try 4.

6) Add Logo Images

Delete the placeholders. Instead, replace them with your logos. 

Here, I opted for a dark background and contrasting white logos. To do this, select the advanced slider and set the background color to black (or any color that you want). Next, duplicate the slider elements eight times and replace each with a logo. 

Don’t forget to adjust the size and spacing to make your carousel look better.

7) Make the Transition Linear

For that buttery smooth scroll, we want the animation to be linear. 

So, navigate to Settings > Advanced and tap Custom CSS. Copy and paste these codes:

%%SELECTOR%% .swiper-wrapper {
	Transition-timing-function: linear;
}

Save your progress. Now, try to preview the frontend. If everything's done right, you should see a seamless, smooth transitioning slider.

8) Remove the Arrow Buttons

Since we’re creating an infinite logo carousel, we really don’t need to arrow buttons here.

So, head to the Styling tab > Slider > Settings and disable those arrows. 

Also, set pagination to none.

Finally, adjust the width of your section until it’s just right for your design.

9) Final View

Save and publish your work. Then, open the live page. Your logo carousel should now be sliding gracefully across the screen. Just like this:

That’s a Wrap!

And there you have it - a beautiful, professional logo carousel sliding right on your screen!

Now you know how to create one, try to play around it. Integrate a carousel into various sections of your website. Instead of logos, you can also try displaying featured events, testimonials, or popular products on your site.

Got any questions or suggestions? Leave your comments below - I’d love to hear from you!