Infinite Client Logo Slider with CSS – Slick Carousel.js

Today we have an infinite CSS carousel (Slider) which allows you to showcase recent project, high-end clients profile logos, and other items on your website.

If you have a site which offers services like web development than it’s a great idea to add a list of your client profiles which have already worked.

By adding a section for clients with name and logo, You can attract new customers and lead more sales.

We are doing to build infinite carousel which allows you to add your client logos with the help of  SlickCarousel.js plugin.

If you don’t like to go with Javascript or Jquery than you can go with Multiple Items CSS Only Carousel which is also responsive with wide-range of browser support.

This plugin is lightweight and comes with a lot of ready to use options. You can easily customize the plugin as per your site layout.

You will surely love this slick slider plugin because of its robust configuration options and mobile responsiveness with the ability to showcase an infinite loop of clients logos in a modern and stylish way.

How to Create Client Logo Slider with Slick Carousel

To create the slider we need to add the main Javascript file of slick Carousel and load the jQuery dependency.

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

To style the slider You need to add the client.css file into your webpage.

<link rel="stylesheet" href="css/client.css">

Now about the markup which is quite easy to write. Add the below HTML markup to where you want to add the carousel to implement on your website.

You notice, We just have a simple section with the class name customer-logos and slider. Then we have to wrap each image with a div with the class name slide.

<section class="customer-logos slider">
  <div class="slide">
  	<img src="https://image.freepik.com/free-vector/luxury-letter-e-logo-design_1017-8903.jpg">
  </div>
  <div class="slide">
  	<img src="https://image.freepik.com/free-vector/3d-box-logo_1103-876.jpg">
  </div>
  <div class="slide">
  	<img src="https://image.freepik.com/free-vector/blue-tech-logo_1103-822.jpg">
  </div>
  <div class="slide">
  	<img src="https://image.freepik.com/free-vector/colors-curl-logo-template_23-2147536125.jpg">
  </div>
  <div class="slide">
  	<img src="https://image.freepik.com/free-vector/abstract-cross-logo_23-2147536124.jpg">
  </div>
  <div class="slide">
  	<img src="https://image.freepik.com/free-vector/football-logo-background_1195-244.jpg">
  </div>
  <div class="slide">
  	<img src="https://image.freepik.com/free-vector/background-of-spots-halftone_1035-3847.jpg">
  </div>
  <div class="slide">
  	<img src="https://image.freepik.com/free-vector/retro-label-on-rustic-background_82147503374.jpg">
  </div>
</section>

The final step to initialize the Carousel with the help of Javascript function.

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

That’s It. Enjoy It.