Our slides and carousels use the awesome power of Slick JS and data attributes. This means you can setup a slider or carousel without touching any JS at all, lets start by taking a look at an example below.
<div class="slick-carousel" data-slick='{ "slidesToShow": 4, "slidesToScroll": 1, "autoplay" : true, "infinite": true, "arrows": true, "dots": false, "responsive": [{ "breakpoint": 1200, "settings": { "slidesToShow": 3 } }, { "breakpoint": 1024, "settings": { "slidesToShow": 2 } }, { "breakpoint": 767, "settings": { "slidesToShow": 1 } }]}'>
<div>
A SLIDE
</div>
<div>
A SLIDE
</div>
</div>
The 1st thing you need to do is create a div with the class “slick-carousel” – this will activate the JS needed for the carousel to work. You then use the custom data attribute “data-slick” to pass the various options to Slick so it knows how you want the slider/carousel to work.
To change the number of slides to show you can use this
"slidesToShow": 4,
Setting this for 4 like you see above will result in a carousel with 4 items in view, if you wish to show a single item, you would set this to 1 etc. To control the number of items the carousel/slider should scroll, alter
"slidesToScroll": 1
as you wish. For example if you want to show 3 items in a carousel, and have the carousel move by 3 items when transitioning you would set this to
"slidesToShow": 2, "slidesToScroll": 2
For more on how to use Slick JS, check out the repository here.
