How to Add an Infinite Client Logo Carousel to Your Website

Adding a logo carousel remains one of our most popular posts on the Solodev blog. For good reason, too: client logo carousels showcase more about you company, validate your brand's authority, and make your customers feel special with a brief shoutout. 

While our original piece (which you can read here) still holds, we wanted to revisit the code, spruce up the design, and run some updates for our readers. 

There are ways of establishing yourself as a trustworthy business and a leader in your field: adding reviews, testimonials from your customers, and displaying the brands you've worked with/for. Especially if you've ever worked with bigger brands, displaying their logos on your site will boost your credibility. 

In this tutorial, we'll show you how to add a carousel of your client's logos to your website using Slick Slider by Ken Wheeler. We chose Slick Slider to showcase an infinite loop of client logos as it is the ideal library with its robust configuration options, mobile responsiveness, and added styling which you can easily customize.

We also recommend you to check out our other Slick Slider tutorials such as:

Combining FontAwesome with Slick Slider to Create Quick Links

Using Text Animations with Slick Slider

or even

Adding a Scroll Functionality to your Navigation Dropdowns

Below is the code and styling you need to add an infinite carousel of client logos to your website. Enjoy.

Getting Started

You'll be needing all the sources below to create this carousel. Add the below links inside the head section of your HTML file where you'd like to put the carousel slider:

HTML

Below is a basic HTML structure built with Bootstrap using grid system. Each div container with the class of .slide contains a slide:

CSS

The CSS below is to customize the slider styling. We added the default Slick Slider CSS link above in the HTML but you'll want to customize the styling such as the size of the images and colors. The code below will override some of the Slick Slider CSS:

JS

Add the JQuery code below either right before the closing body tag in your HTML file inside script tags or create a file called carousel.js and put the code in there then link to the file in your HTML. We select the slider container by its classname .logo-carousel and tie the slick slider code to it. In our case, we show 6 slides side by side, the autoplay is on and autoplay speed is 1000 which is the speed in milliseconds. Feel free to change and customize all these settings for your own project. We posted another tutorial previously and explained some of the most used settings in Slick Slider: https://www.solodev.com/blog/web-design/how-to-combine-fontawesome-with-a-slider-to-create-quick-links.stml. You can see the whole list of features and settings along with their explanations here.

And there it is. Check out the JSFiddle below to see how the logo carousel works before committing to its use: