Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

Adding an Infinite Client Logo Carousel to your Website

Showing off your roster of clients is one of the best ways to establish your credibility as a business or organization online...

Showing off your roster of clients is one of the best ways to establish your credibility as a business online. In Part II of our Slick Slider Series, we show you how to add a carousel of your client's logos to your website using Slick Slider by Ken Wheeler. At Solodev, we like Slick Slider due to its robust configuration options and mobile responsiveness as displayed by Slick Slider's ability to showcase an infinite loop of client logos in a modern and stylish manner.

If you missed Part I of our Slick Slider Series, we went through the process o adding a hero slider using Slick Slider. Below is the code and styling you need to add an infinite carousel of client logos to your website. Enjoy.

Below is the HTML, CSS, and JavaScript required.

Step 1 - Add the HTML below to where you'd like the carousel to populate on your website

//Replace the images with the client logos of your customers
<div class="container">
  <section class="customer-logos slider">
    <div class="slide"><img src="images/image1.png"></div>
    <div class="slide"><img src="images/image2.png"></div>
    <div class="slide"><img src="images/image3.png"></div>
    <div class="slide"><img src="images/image4.png"></div>
    <div class="slide"><img src="images/image5.png"></div>
    <div class="slide"><img src="images/image6.png"></div>
    <div class="slide"><img src="images/image7.png"></div>
    <div class="slide"><img src="images/image8.png"></div>
  </section>
</div>

Step 2 - Download the CSS below and include it in your website

infinite-slider.css

Step 3 - Add the JavaScript below to a file called carousel.js

$(document).ready(function(){
  $('.customer-logos').slick({
    slidesToShow: 6,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 1000,
    arrows: false,
    dots: false,
    pauseOnHover: false,
    responsive: [{
      breakpoint: 768,
      settings: {
        slidesToShow: 4
      }
    }, {
      breakpoint: 520,
      settings: {
        slidesToShow: 3
      }
    }]
  });
});

Step 4 - Add the following includes to the web page your carousel is on

<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

In this article, Solodev showed you how to create and add an infinite customer logo carousel to your website. Swap out the logos make it your own!

Download from Github

Share on Facebook Tweet It

Matthieu McClintock
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev