In this video, I’m going to make a brand logo slider (carousel) using HTML, CSS, and jQuery’s Slick Slider plugin.
I have made many such videos in which I have used Slick Carousel(also you can called slick slider) and you must have seen many such websites and videos in which Slick Slider is used and let me tell you among friends that Slick Slider is very popular and you can easily You can integrate it into your website and you can use its functionality as well. You can visit the website Slick Slider (Slick Carousel) and see its examples and documentation, if you read it, it will be very easy for you to understand.
As you can see in the image above. That’s why I have added the brand logo to it and
slidesToShow: 4 I have shown four logos, you can show more logos and fewer logos as per your needs.
SlidesToScroll: 1 How many slides will scroll when I click the left and right arrows, now I have set the value of slides to scroll to 1, so that only one The logo is move(change), if you want, you can change it according to your requirement.
arrows: true Its slider controls such as arrows, dots: true pagination dots are set to true.
autoplay: true The autoplay option is set to true so that it slides in automatically.
autoplaySpeed: 2000 I have set the autoplay speed to 2000, you can set it according to you. If you want to increase the speed then you should reduce it to 2000 and if you want to slow down the speed then you should increase it from 2000 to 4000 or 5000.
infinite: true Then I set the Infinity option to True so that the slide keeps rotating so that the last slide doesn’t stop. If you don’t want to slide continuously, you can drop the option to infinity.
You might also like slick slider videos
Testimonial Carousel Using HTML,CSS & Slick Carousel
Profile card slider UI design using HTML,CSS & Slick Carousel
E-commerce Product Slider using HTML, CSS & jQuery Slick Carousel Plugin
Image Slider Using Slick Carousel Slider
As you can see in the above image, you will see 4 brand logos, pagination dots, and left and right side arrows which you can move the slider to the left and right side. that I have attached the source code with jsfiddle file(embedded file),you can copy the same. For this you have to create 3 files which I have mentioned below.
Here are the default index.html structure files, you just create an index.html file then copy code and paste it into your index.html file.
index.html In HTML structure, I have taken a div named container so that I can center it, after that, I have taken another div by name of logo-slider and I have called this class in the jquery slick slider. Inside it, I have taken 6 divs with the name of the item(You can take divs named as item 8,10,12,15) and inside it has taken logo images with anchor tag so that when user click on any logo Click above, then I can redirect it to any website. You can see code below.
Style.css To make this logo slider look a little better, I did a little styling to make this slider look even better. In this, I have given box-shadow, border, border-radius and padding to a class named item. After that, a margin of 15px has been given to the class named Slick-Slide to give some space between the logos. After that the hover effect is given whenever the cursor is placed over the div ie logo named item then it will scale and move up 5px. You can see its code below.
After saving the style.css file in which you have to paste the style, you have to see the preview once and confirm whether all the CSS styles are loaded or not.
script.js file in which you have to paste the code and once you paste it, the slick carousel will start working.
And if you want to write the code of js in index.html file itself then, you have taken the script tag before the end of the body tag and i have written the js inside it. Inside it called Slick Slider and I have shown four people in it and set dots, arrows, autoplay, infinite to true. And the speed of autoPlay has been kept 2 seconds. That is, it will change every two seconds.
To activate Slick Slider, you will have to include its library, for this you will have to add one js link and two CSS key links. js link has to be added below the jquery key link i.e. above the script tag and the css link has to be added before the head tag ends. I have given its code below.
note: you must style.css and script.js file linked in index.html file before end of the head tag
Here is the preview of the brand logo slider you can see
I give below the link of some more plugins, you can also make a brand logo slider with the help of this.
I have attached the above code in jsfiddle file embedded so you can copy it and if you do not understand then I have also given the video link you can integrate even after watching.Â
I know that you must have liked this article and my video very much, if you liked it, then go to my channel and like and share the video and if you want to see more such videos, then definitely subscribe to the learndesign youtube channel, Have a good day.
