Slick Slider Plugin in jQuery | Slick Slider Tutorial

In this video you will learn How to use Slick Slider with easy steps , you will learn the depth of slick slider. Steps to use slick slider :

step1: Create a design you want to scroll

step2: Use jQuery CDN, if you used bootstrap4 or bootstrap3 then ignore this step.

step3: Use the slick CSS and JS CDN link from the following URL:

step4: place the jQuery code of slick slider after slick JS CDN

$('.responsive').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 3,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});

step5: Give id or class to the parent element of the div which you want to scroll

step6: give the class or id name in the slick script code which you have given to the parent element of the div that you want to scroll.

Step7: if you want to give space between boxes then you have to use the following CSS:

/* the slides */
.slick-slide {
margin: 0 10px;
}

Step8: to make slick slider button visible you have to use the following CSS code:

.slick-prev:before, .slick-next:before
{
color:#000;
}

Check the following playlist to explore your knowledge:

1. Data Table Plugin Tutorial in Hindi

2. Upload Website on live server (WordPress website, php website, CodeIgniter website etc.)

3. Web Designing Interview Questions:

4. .htaccess tutorial:

5. PHP Important Topics:

6. React JS Important Topics

If you like this video, don't forgot to subscribe and press the bell icon for latest updates.

[feyisayoamujoyegbe]

Your video really helped me. Thank You!!!

[varunpandey]

Nice Video, Nice Playlist of Slick Slider

[codeek]

In case your slider looks messed up even after this tutorial: add this in your styles:
.responsive{
width: 90vw;
margin:auto;
}
.slick-slide{
height: auto;
margin: 0 10px;
}

[Kuldeep.Maurya]

sir mera nhi bna slick slider maine link saare lgaye per nhi hua

[rajeevyadav-npfg]

Slick slider lagane m problem ho rhi h...

[rajeevyadav-npfg]

Mai jb bhi jQuery use kr rha hu tab mera card ek neeche ek a rha h