How can I differentiate between left to right (ltr) and right to left (rtl) movements in a slick slider? I am looking to add unique class names for each direction movement.
Can anyone help me with this? Feel free to comment if you need more information.
This is the script I have attempted:
var dir;
if(dir=='right')
{
$('.slick-active').addClass('right-effect');
}
if(dir=='left')
{
$('.slick-active').addClass('left-effect');
}
console.clear();
$(".slider").slick({
// autoplay: true,
dots: true,
arrows: false,
slidesToShow: 2,
slidesToScroll: 2
});html, body {
background: #102131;
color: white;
}
.container {
padding: 30px;
}
.test-case-wrap {
margin-bottom: 60px;
}
.slick-slider {
background: #3a8999;
font-size: 30px;
line-height: 1;
text-align: center;
color: white;
}
.slick-slider .slick-dots button:before, .slick-slider .slick-dots .slick-active button:before {
color: rgba(255, 255, 255, .85);
}
.slick-slider .slick-slide {
background: #3a8999;
padding: 40px 0;
}
.slick-slider .slick-slide:nth-child(odd) {
background: #e84a69;
}
.slick-track {
display: flex;
}
.slick-track .slick-slide {
display: flex;
height: auto;
align-items: center;
justify-content: center;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
<div class="container">
<div class="slider">
<div>Lorem ipsum dolor sit amet</div>
<div>slide 1</div>
<div>slide 2</div>
<div>slide 3</div>
<div>slide 4</div>
<div>slide 5</div>
</div>
</div>