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

Demo on JSFiddle Download from GitHub

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 - Add the CSS below to the stylesheet of your website.

/* Slider */
.slick-slide {
    margin: 0px 20px;
}

.slick-slide img {
    width: 100%;
}

.slick-slider
{
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;
    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

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">

Demo on JSFiddle Download from GitHub

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!

With the Solodev Website Builder, it's faster and easier to design, build, and launch beautifully crafted websites than ever before.

Learn More

Adding an Infinite Client Logo Carousel to your Website

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

Step 2 - Add the CSS below to the stylesheet of your website.

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

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

Product

Solutions

Resources

About

Thank you for subscribing!

Features

Solutions

Resources

About