0

Использую слайдер 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"
    });
});
4
  • ну так краткий пример верстки и навешивания слика в студию. а то я могу вам написать, что $(".card").slick(...) но толку то не будет, наверное?
    – teran
    Commented 14 окт. 2021 в 20:05
  • @teran Обновил вопрос
    – PeWe
    Commented 14 окт. 2021 в 20:20
  • что-то подозреваю что один из asNavFor у вас лишний. Относительно сути вопроса - я так опнимаю, приведен пример одной карточки, и их у вас таких несколько?
    – teran
    Commented 14 окт. 2021 в 21:01
  • @teran да, карточек таких много
    – PeWe
    Commented 14 окт. 2021 в 21:04

1 ответ 1

1

я так подозреваю, что у вас есть какой-то цикл по карточкм, и там меняется data-pid. Вот его можно использовать для формирования id блоков. Получите что-то вроде

<div class = "card" data-pid="1">
    <div class = "wrapper slick" id="slick_1">
        <img class = "img">
        <img class = "img">
        <img class = "img">
    </div>
    <div class = "wrapper2 slick-nav" id="slick_nav_1">
        <img class = "img">
        <img class = "img">
        <img class = "img">
    </div>
</div>

далее перебираете все .card и вешаете обработчики

 $(".card").each(function(){
      let pid = $(this).data('pid');

      $(`#slick_${pid}`).slick(...);
      $(`#slick_nav_${pid}`).slick({
         asNavFor: `#slick_${pid}`,
      });
 });

Хотя в целом, основные слайды можно добавить без цикла через $(".slick").slick(...) а вот навигации уже в цикле.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.