Как перелистнуть нужный слайд при клике на фото Slick?

Question

[Elena_11]

Здравствуйте, есть Slick-слайдер с 3 слайдами. Под ним есть 3 маленьких фото по клику на которые надо перелистнуть на нужный слайд с большим фото. Как это реализовать? Т.е. нужны миниатюры, которые должны работать как дотсы и листать слайды

Comments

[Ankhena]

В документацию загляните хоть одним глазиком.

[Elena_11]

Ankhena, в примерах есть только 2 связанных слайдера

[Ankhena]

Elena_11, в вашем вопросе из тоже два.
Или нужно переформулировать вопрос. А также сделать пример в котором видно, что делали и что конкретно не вышло.

И я бы сменила slick на swiper при первой возможности.

[Elena_11]

Ankhena, проще показать наверное



снизу не нужны стрелки и листание, просто как дотсы по сути тока с картинками. Ну или как-то чтобы можно было ссылки на маленькие картинки повесить

[Ankhena]

Elena_11,

в примерах есть только 2 связанных слайдера

И чем это не устраивает?

[Elena_11]

Ankhena, а вы сравните. В примере идут стрелки по бокам и пролистывание картинок. У меня статичные маленькие изображения. Так же есть нюанс, что сайт на Тильде, это не вёрстка. Инициализирован большой слайдер, а картинки вставлены отдельными элементами. Т.е. тут либо ссылки на них вешать как-то, либо через кастомную пагинацию дотсы с картинками делать. Но у меня не получилось.

Пробовала через customPaging:

dots: true,
customPaging: function(slick,index) {
    var targetImage = slick.$slides.get(index).find('img').attr('src') || '';
    return '<img src=" ' + targetImage + ' "/>';
}

[Ankhena]

Elena_11, Если вы во втором слайдере скажете показывать три картинки, то они будут статичными.
Либо замените/скрестите с табами.

Так же есть нюанс, что сайт на Тильде

Как мило.

[Elena_11]

Ankhena, на чём клиент пришёл, с тем и работаем. По вышеописанным причинам связанный слайдер не подходит технически. Поэтому больше интересуют варианты с customPaging или ещё что-то вроде есть с "slickGoTo", но не могу найти особо информацию.

[Elena_11]

Ankhena, хотя может и подойдёт вариант со связанным слайдером. Там вроде нет общего контейнера. Попробую.

[Ankhena]

Elena_11,

на чём клиент пришёл, с тем и работаем.

Я про вновь прибывшие условия. Это очень мило рассказывать о них не в вопросе, а где-то там потом.

[Elena_11]

Ankhena, ну инициализация js-скрипта везде одинаковая, поэтому и не уточнила. А вот возможности вёрстки в Тильде ограничены. Поэтому в этом плане руки связаны

Answer 1

[Elena_11]

Может кому пригодится, получилось реализовать переход по слайдам с помощью метода "slickGoTo", на нужные элементы, по клику на которые должен листаться слайдер, надо повесить атрибуты data-slick-index="0", data-slick-index="1", data-slick-index="2" и т.д. Обратите внимание, что нумерация слайдов начинается с 0

$(".go-item").on("click", function() {
  const index = $(this).attr("data-slick-index");
  $(".slider_wrapper").slick("slickGoTo", index);
});