Gold Penguin Logo with Text

Create a Logo Carousel in Breakdance Builder

Looking for ways to jazz up your site with a professional-looking logo carousel? Follow this easy tutorial to learn how to create an infinite slide of logos using Breakdance Builder.
Updated August 28, 2023

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:

Logo Carousel spinning in Breakdance Builder

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.

Breakdance advanced slider

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.’

advanced slider settings

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.

advanced slider infinite autoplay

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. 

advanced slider autoplay speed

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.

advanced slider speed

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.

advanced slider slider per view
advanced slider phone view

6) Add Logo Images

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

advanced slider edit image

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. 

breakdance slider 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. 

breakdance slider disable arrow buttons

Also, set pagination to none.

breakdance slider pagination

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

adjust breakdance slider width

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:

Logo Carousel spinning in Breakdance Builder

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!

Want To Learn Even More?
If you enjoyed this article, subscribe to our free monthly newsletter
where we share tips & tricks on how to use tech & AI to grow and optimize your business, career, and life.
Written by Christy Cañete
Christy Cañete is a software engineer who's passionate about front-end web design. Not only can she code, but she writes too! She loves breaking down technical topics into super easy tutorials. If you're looking to learn without the jargon, she's your go-to.
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
Join Our Newsletter!
If you enjoyed this article, subscribe to our newsletter where we share tips & tricks on how to make use of some incredible AI tools that you can use to grow and optimize a business
magnifiercross