Client Logo Slider HTML Free Download

Client Logo Slider HTML Free Download
Project: Client Logo Slider
Author: Md. Ashiqur Rahman
Edit Online: View on CodePen
License: MIT

If you’re looking to enhance your website with an attractive “Client Logo Slider,” we’ve got you covered with this free HTML code to download. This code utilizes popular libraries like jQuery, Slick Carousel, and Bootstrap to create a visually appealing and dynamic slider.

The primary function of this code is to display a collection of client logos in a sliding carousel format. The logos are showcased with smooth transitions and can be automatically scrolled through thanks to the autoplay feature. You can easily customize the number of logos displayed on different screen sizes, making it responsive and adaptable.

By incorporating this “Client Logo Slider” into your website, you can showcase your partners or clients in an engaging and professional manner, adding an extra touch of sophistication to your online presence.

How to Create a Client Logo Slider on Your Website

1. First of all, load jQuery, Slick Carousel, and Bootstrap by adding the following CDN links to the head tag of your website.

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

2. To create the slider, begin by structuring the HTML code. Inside the slider, insert your client’s logo according to the given format.

<div class="container">
  <h2>Our  Partners</h2>
   <section class="customer-logos slider">
      <div class="slide"><img src="path/to/image.jpg"></div>
      <div class="slide"><img src="path/to/image.jpg"></div>
      <div class="slide"><img src="path/to/image.jpg"></div>
      <div class="slide"><img src="path/to/image.jpg"></div>
      <div class="slide"><img src="path/to/image.jpg"></div>
      <div class="slide"><img src="path/to/image.jpg"></div>
      <div class="slide"><img src="path/to/image.jpg"></div>
     
   </section>
</div>

2. Now, customize the appearance of the logo slider using the provided CSS. Feel free to add more CSS rules to suit your specific preferences and requirements.

h2{
  text-align:center;
  padding: 20px;
}
/* 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;
}

3. Finally, enable the slick slider functionality, initialize it within the jQuery document ready function with the provided configuration options. Don’t hesitate to modify these options to better align with your preferences.

$(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 all! hopefully, you have successfully created the client logo slider using this free HTML, CSS & JS Code. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply