Function to have multiple sliders on same page.

multiple-slick-sliders.js

// Needs some tweaking per project.

function initSlickSlider(clsSlider,smSlides,mdSlides,lgSlides){
	// init Slick slider
	$(clsSlider).each(function (idx, item) {
		var s = smSlides;
		var m = mdSlides;
		var l = lgSlides;
		var carouselId = "carousel" + idx;
		this.id = carouselId;
		$(this).slick({
			slide: "#" + carouselId +" .option",
			slide: 'li',
			slidesToShow: l,
			slidesToScroll: 1,
			nextArrow: '<div class="next sprite sprite-icon-arrow-right"></div>',
			prevArrow: '<div class="prev sprite sprite-icon-arrow-left"></div>',
			infinite: true,
			useTransform: false,
			responsive: [
				{
					breakpoint: 992,
					arrows: false,
					settings: {
						slidesToShow: l,
					}
				},
				{
					breakpoint: 768,
					arrows: false,
					settings: {
						slidesToShow: m,
						centerMode: true,
					}
				},
				{
					breakpoint: 576,
					arrows: false,
					settings: {
						slidesToShow: s,
						centerMode: true,
					}
				}
			]
	    });
	});
}