Responsive Infinite Client Logo Carousel slider

Showcasing the client's logo in a visually appealing way is one of the standard features that most successful websites have on their website to establish authenticity. Logo carousel slider is a beautiful way to showcase the company's logo that already received or receiving your services. If some big companies already received your assistance and you showcased them in the client logo carousel, it will surely help build your credibility as a company. If someone new comes to your website and goes through those brands, then there is a chance that they will try to obtain your services because he will think if those big brands trusted your company, then he should as well. So the brand logo or client brand logo slider is an integral part of a website.

This project will create a logo slider with HTML CSS and a jquery plugin called owl carousel. First and foremost, we have to download the plugin from the owl carousel website, and after extracting, we have to copy three files from it and copy them to our project. These three files are owl min CSS file, theme default CSS, and the owl min js files. I have used the online version of those files, and I provided all the links down below.

We start with the HTML section by creating a div with a class name of the brand-carousel and the separate class name of section padding to give a custom padding to the carousel container. Inside the box, we will take six div elements, each of them named single-logo. Now we will put a PNG brand logo image in each single-logo div. When you are serving a large company, it is the best practice to ask for their logo to put in your client logo slider. It will increase the authenticity of your website.

Coming to the CSS section, we start by giving the body an Alice blue background color followed by providing a 60px bottom and top width to section-padding class. After that, we also provide the same background color to the brand carousel container as the body and give it a 15% margin from the top.

You may also like:

• Awesome Animated Search Bar using html and css
• Awesome Water Ripples Effect using Jquery
• Navigation Bar with Slider using HTML CSS & Bootstrap 4

Now we come to the implementation of the owl carousel for our project. First of all, we will go to the plugin website. Then we will click demos from the top navigation bar. There we will observe a bunch of examples on how we can use it to any website. We will use the very first one, which is basic, on our project. You can try others too, but it is the best idea to have some basics first and then go for the other options. In my opinion, the first example is good enough to implement a nice looking brand slider to your project. When we click on basic, the initiating code will appear. We need to copy the code and paste it in our project. Before implementing the plugin, we need to insert an owl-carousel class in the brand-carousel container class.

Now there are a couple of options available in the initiating code. The first one is the loop, and this determines whether you want the slider to be slide on its own or a manual slide. By default, it is set to true, but you can set it false if you want a manual slide. Then comes the margin, and it indicates the margin between the logo images of the slider. Increasing the margin will result in a distance between the logo images. You can increase or decrease the value and check which suits you the best. Then comes the responsive part. There are three different breakpoints available in there. The first breakpoint is for the mobile version, and it is up to you how many items you want to show in small devices. I guess one will be enough for the small screen, and it will look aesthetic like that. Then comes to the medium device, and the basic one is set to 3., and for larger devices, it sets to 5 items in one go. Now, these values can be changeable, but before changing the value, you have to check whether the slider best for each device or not.

Responsive Infinite Client Logo Carousel slider (source code) 

For this snippet, you need to create an HTML CSS and a custom js file. You have to add the files to your project along with the files I provided above. Copy the code below and paste the codes to the respective files.

FILES:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> <script src="custom.js"></script>

HTML:

<div class="brand-carousel section-padding owl-carousel"> <div class="single-logo"> <img src="https://i.postimg.cc/QxPJ8hXy/brand-1.png" alt=""> </div> <div class="single-logo"> <img src="https://i.postimg.cc/pdMQjC5Q/brand-2.png" alt=""> </div> <div class="single-logo"> <img src="https://i.postimg.cc/B6qxYvgX/brand-3.png" alt=""> </div> <div class="single-logo"> <img src="https://i.postimg.cc/d14GzKHn/brand-4.png" alt=""> </div> <div class="single-logo"> <img src="https://i.postimg.cc/x8ZM13Sz/brand-5.png" alt=""> </div> <div class="single-logo"> <img src="https://i.postimg.cc/B6qxYvgX/brand-3.png" alt=""> </div> </div>

CSS:

body { background: aliceblue; } .section-padding{ padding:60px 0; } .brand-carousel { background: aliceblue; margin-top: 15%; } .owl-dots { text-align: center; margin-top: 4%; } .owl-dot { display: inline-block; height: 15px !important; width: 15px !important; background-color: #878787 !important; opacity: 0.8; border-radius: 50%; margin: 0 5px; } .owl-dot.active { background-color: #000 !important; }


JS:

$('.brand-carousel').owlCarousel({ loop:true, margin:10, autoplay:true, responsive:{ 0:{ items:1 }, 600:{ items:3 }, 1000:{ items:5 } } })


Hope you like it. Thanks for visiting the blog.