How to use Slick Slider In Your Website | jQuery Slick Slider Tutorial | How To Use Carousel In Web

hi guys hope you are doing okay my name is abdul basil and welcome to a second video and today i'm going to use uh we are going to learn how to use slick carousel in our project or in our website so first of all we have to i'm going to tell you what this like so slick is a carousel or a slider uh it's a multi slider uh which we can use just like uh some carousels in any website okay so the how we are going to use slick so our first step is to go to the google and write select cdn okay so as you can see or click on the first link we can find these cdns as well so we are not going to copy all those links we are going to use just two links first we are going to lose use the slick mean minified js which is this one and the second one is slick css okay so first of all we are going to copy the slick js link and in the last of our project we are going to write a tab uh script tag and just give them a source and paste that link and after that we are going to copy this like css just copy these like css link and paste in the head just write a link tag type our link tag and the head and in the hyper reference tag we are going to paste the css cdn link and after that okay so we have i forgot to tell you we are going to use the jquery library first as we all know that slick is some kind of using jquery libraries and so we have to use these jquery cdn first and uh okay sorry here's the link and we are going to copy unified links yes as we just got the jquery library cdn just paste this above the select carousel script tag so the this is very important thing so you have to make sure that you have to write uh jquery first and after that we have to write the jquery sorry is click carousel library and after we are going to use script select carousel function so we are going to use this slick kerosene function after the library so first we are using jquery library and after that we are using slick carousel and after that we are using slick function so if we just use if you are the thing is if you are you use slick library before the jquery library so the select function is not work at this time so we have to use just like i'm giving you the order i just give you the order of the libraries so we have to copy we have to go to the select website and just close all those tags and in these like website we are going to use select function so if you can see if you use if you want to use a single slide or if you want to show a single slide so we can use this function of a slick slider so we are going to use this like function in our index.html file okay so after it just copy the list slider we and copy and replace this with their slick func classes okay i just copy these click list class and paste this over with this like function and we are going back to our index.html in the chrome browser and refresh this page and let's see what's happened oh okay fine so as we can see we are we just got our carousel or we just make a first carousel in the project so at this time we are going to make uh another scale so we are going to make some two slides we are going to show to not a single slide we are going to show two slides at a time so this um in this time we are going to uh go back to slick slider website and scroll down and we can see a multiple items over there so it means we are we can we can show multiple items in this slider as well so if we just see the the slides to show our three that means if we if we see three items if we write two so we can just see two items at a time so just copy this link and it replace this with our select function and the main thing is we have to replace these class as well so we are not going to show three items we are going to show first we are going to show two items at a time so just remove the infinite i will tell you later what is infrared doing at this time okay and what is the slide to scroll to the thing is slide to scroll means if i just scroll if we just click on the arrow so and we are using slide to show three so it will is called three times so this is the first scroll this is the second time and this is the third time so it will scroll to the four and if we write if we come back to our main sides and just write 2 so it will go back to third here so if we just write 2 over there so we will we just find this three third slide over there on the first slide so just go back and write to so and refresh this page so we can get our two slides as well and just we just click on the next slide and we can find we just find our slider with two slides it means that select slides to show two which means we are going to show two slides at a time and the slides to scroll means if we just click on the next item it will go back to third means like that okay so and if we just replace the two with the one in this slight scroll and refresh this again so now we are going to click next and as you can see that this select slide 2 will go to the first slide just like this so hope you get this and this video will help you and thank you very much [Music] bye bye

Channel: The Developer Dude

Views: 21,873

Keywords: How to use Slick Slider In Your Website | jQuery Slick Slider Tutorial | How To Use Carousel In Web, slick slider, slick carousel, carousel, jquery slick, jquery slider, jquery carousel, jquery carousel for beginners, beginners, carousel for beginners, How to use Slick Slider In Your Website for beginners, google, jquery

Id: RleMqZRZ868

Length: 8min 53sec (533 seconds)

Published: Mon Dec 07 2020