Itai Etzman Itai Etzman - 6 months ago 19
Javascript Question

Allowing multiple CSS classes to use the same JS function (Slick Carousel)

I am trying to implement Slick slider multiple times on the same page, with each instance using "Slider Syncing". Now the issue I'm having is that with my code below, the synced text adjusts with both sliders:



<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="./slick/slick.css">
<link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">
</head>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}

* {
box-sizing: border-box;
}

.person {
width: 50%;
margin: 0px auto;
}

.person img {
width: 100%;
margin:auto;
}

.slider {
width: 90%;
margin: 20px auto;
}

.slick-slide {
margin: 0px 20px;
opacity: 0.5;
}

.slick-slide img {
width: 100%;
}

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

.slick-center {
opacity: 1;
}
}
</style>
<body>

<section class="person">
<div><img src="img/people/jobs.jpg"></div>
</section>
<section class="regular slider">
<div><img src="img/1.jpg"></div>
<div><img src="img/2.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/4.jpg"></div>
<div><img src="img/5.jpg"></div>
<div><img src="img/6.jpg"></div>
<div><img src="img/7.jpg"></div>
<div><img src="img/8.jpg"></div>
<div><img src="img/9.jpg"></div>
</section>

<section class="slider-for slider">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</section>

<section class="regular slider">
<div><img src="img/1.jpg"></div>
<div><img src="img/2.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/4.jpg"></div>
<div><img src="img/5.jpg"></div>
<div><img src="img/6.jpg"></div>
<div><img src="img/7.jpg"></div>
<div><img src="img/8.jpg"></div>
<div><img src="img/9.jpg"></div>
</section>

<section class="slider-for slider">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</section>

<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).on('ready', function() {
$(".regular").slick({
dots: false,
infinite: true,
centerMode: true,
centerPadding: '40px',
slidesToShow: 5,
slidesToScroll: 1,
lazyLoad: 'ondemand',
asNavFor: '.slider-for',
focusOnSelect:true
});
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.regular'
});
});
</script>

</body>
</html>





Now I realise the error in the above is because it is using the same Javascript function to affect the "different" sections and thus causing the error. One fix I can think of is to have a new function for each class, i.e.:

$('.regular1').slick({ ... }); -> <section class="regular1">
$('.slider-for1').slick({ ... }); -> <section class="slider-for1">

$('.regular2').slick({ ... }); -> <section class="regular2">
$('.slider-for2').slick({ ... }); -> <section class="slider-for2">

$('.regular3').slick({ ... }); -> <section class="regular3">
$('.slider-for3').slick({ ... }); -> <section class="slider-for3">

etc


My question is: Is there a way to do this more efficiently. For example, by including some sort of variable in the class name, i.e:

$('.regular'.$a).slick({ ... }); -> <section class="regular1">
$('.slider-for'.$a).slick({ ... }); -> <section class="slider-for1">


This isn't a huge issue with only 2 sliders on the page, but I intend to have 10's of sliders on a single page being autogenerated by a PHP script, and I don't really want to have to copy the fucntion over and over again with a different class name, it's inefficient.

For reference, I'm using this carousel: http://kenwheeler.github.io/slick/

Thanks

Itai

RaV RaV
Answer

You can do it with .each() or ForEach, simple example:

$( ".slider-for" ).each(function() {
  $( this ).slick({ ... });
});

For reference: https://api.jquery.com/each/