Slick Slider Plugin in jQuery | Slick Slider Tutorial

Subscribe here to learn more:  @thedigitaloceans

Download Link : https://the-digital-oceans.com/youtub...

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:

https://cdnjs.com/libraries/slick-car...


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
https://www.seevid.ir/fa/w/mN0ux...

2. Upload Website on live server (WordPress website, php website, CodeIgniter website etc.)
https://www.seevid.ir/fa/w/iORMJ...

3.  Web Designing Interview Questions:
https://www.seevid.ir/fa/w/feD42...

4. .htaccess tutorial:
https://www.seevid.ir/fa/w/UCbV6...

5. PHP Important Topics:
https://www.seevid.ir/fa/w/AVTHX...

6. React JS Important Topics
https://www.seevid.ir/fa/w/7iH9P...


If you like this video, don't forgot to subscribe and press the bell icon for latest updates.
Click here to Subscribe:  @thedigitaloceans