Использую слайдер slick для карточки товара. Подскажите, пожалуйста, как сделать так, чтобы для каждой новой карточки автоматически генерировался персональный слайдер.
Сама карточка довольно объемная. Просто ее пример
<div class = "card" data-pid="1">
<div class = "wrapper" id="slickSlider">
<img class = "img">
<img class = "img">
<img class = "img">
</div>
<div class = "wrapper2" id="slickSlider2">
<img class = "img">
<img class = "img">
<img class = "img">
</div>
</div>
и сам slick
$(function(){
$('#SlickSlider').slick({
slidesToShow: 3,
slidesToScroll: 1,
arrows: false,
dots: false,
focusOnSelect: true,
vertical: true,
infinite: false,
asNavFor:"#SlickSlider2"
});
$('#SlickSlider2').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
infinite: false,
asNavFor:"#SlickSlider"
});
});
$(".card").slick(...)
но толку то не будет, наверное?asNavFor
у вас лишний. Относительно сути вопроса - я так опнимаю, приведен пример одной карточки, и их у вас таких несколько?