Slick Slider Multiple sliders that keep active position
I have multiple Slick sliders on the same page. Each slider has a Nav thumbnail. The problem is that sliders use the previous current position rather than starting from the first thumbnail.
I guess I need a way to dynamically add the ID so that they don't affect each other. (My JS knowledge is very basic)
$('.slider-products').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
var windowWidth = $(window).width();
if(windowWidth <= 800) {
$('.slider-nav').slick({
vertical: false,
slidesToShow: 4,
slidesToScroll: 1,
asNavFor: '.slider-products',
arrow: false,
focusOnSelect: true
});
}
else {
$('.slider-nav').slick({
vertical: true,
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-products',
focusOnSelect: true
});
}
+3
source to share
1 answer
- Use the method
.each
to bypass all sliders. - Add a numeric class for each pair of method
.addClass
sliders . - Use the parameter
responsive
to change the settings according to the width of the screen.
Please check the result: https://codepen.io/glebkema/pen/bWRZzB
var numSlick = 0;
$('.slider-products').each( function() {
numSlick++;
$(this).addClass( 'slider-' + numSlick ).slick({
arrows: false,
asNavFor: '.slider-nav.slider-' + numSlick,
fade: true,
slidesToScroll: 1,
slidesToShow: 1,
});
});
numSlick = 0;
$('.slider-nav').each( function() {
numSlick++;
$(this).addClass( 'slider-' + numSlick ).slick({
arrow: false,
asNavFor: '.slider-products.slider-' + numSlick,
focusOnSelect: true,
slidesToScroll: 1,
slidesToShow: 4,
responsive: [
{
breakpoint: 800,
settings: {
slidesToShow: 3,
}
}
]
});
});
.slick-arrow {
display: none !important; /* `arrows: false;` is not enough to prevent horizontal scrolling */
}
.slick-slide {
background: #c69;
border: 2px solid #fff;
color: #fff;
font-size: 36px;
font-weight: bold;
outline: none; /* prevent the appearance of a tiny gray contour */
padding: 18px 0;
text-align: center;
}
.slider:nth-of-type(n+3) .slick-slide { background: #9c6; }
.slider:nth-of-type(n+5) .slick-slide { background: #69c; }
.slider-nav {
margin-bottom: 12px;
}
.slider-nav .slick-slide:hover {
cursor: pointer;
opacity: .7;
}
<div class="slider slider-products">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div class="slider slider-nav">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div class="slider slider-products">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div class="slider slider-nav">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div class="slider slider-products">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div class="slider slider-nav">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
+3
source to share