0

Всем привет, на базе slick делаю слайдер, так вот подскажите пожалуйста, как его настроить так, что бы при нажатии на кнопки левый слайдер (миниатюры) не двигался вертикально, а просто был зафиксирован, но фото в правом слайдере (большие фото) менялись после нажатия на кнопки.

https://codepen.io/karimovcode/pen/VRROLd

const $left = $(".left");
const $gl = $(".gallery");
const $gl2 = $(".gallery2");
const $photosCounterFirstSpan = $(".photos-counter span:nth-child(1)");

$gl2.on("init", (event, slick) => {
  $photosCounterFirstSpan.text(`${slick.currentSlide + 1}/`);
  $(".photos-counter span:nth-child(2)").text(slick.slideCount);
});
$left.slick({
slidesToShow: 2,
});

$gl.slick({
  rows: 0,
  slidesToShow: 2,
  arrows: false,
  draggable: false,
  useTransform: false,
  mobileFirst: true,
  responsive: [
    {
      breakpoint: 850,
      settings: {
        slidesToShow: 4
      }
    },
    {
      breakpoint: 1023,
      settings: {
        slidesToShow: 1,
        vertical: true
      }
    }
  ]
});

$gl2.slick({
  rows: 0,
  useTransform: false,
  prevArrow: ".arrow-left",
  nextArrow: ".arrow-right",
  fade: true,
  asNavFor: $gl
});

function handleCarouselsHeight() {
  if (window.matchMedia("(min-width: 1024px)").matches) {
    const gl2H = $(".gallery2").height();
    $left.css("height", gl2H);
  } else {
    $left.css("height", "auto");
  }
}

$(window).on("load", () => {
  handleCarouselsHeight();
  setTimeout(() => {
    $(".loading").fadeOut();
    $("body").addClass("over-visible");
  }, 300);
});

$(window).on(
  "resize",
  _.debounce(() => {
    handleCarouselsHeight();
    /*You might need this code in your projects*/
    //$gl1.slick("resize");
    //$gl2.slick("resize");
  }, 200)
);

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

$gl2.on("afterChange", (event, slick, currentSlide) => {
  $photosCounterFirstSpan.text(`${slick.currentSlide + 1}/`);
});
1
  • Вы позволите уточню вопрос? при клики на сами миниатюры нужно что бы тоже не двигался вертикально, а просто был зафиксирован, но фото в правом слайдере (большие фото) менялись после нажатия на соответствующую миниатюру.
    – user324611
    29 мар 2019 в 6:13

1 ответ 1

0

Рассоедините карусели, закомментируйте asNavFor: $gl:

$gl2.slick({
  rows: 0,
  useTransform: false,
  prevArrow: ".arrow-left",
  nextArrow: ".arrow-right",
  fade: true,
  //asNavFor: $gl
});

И добавьте $gl.slick("slickGoTo", index); здесь:

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

Готовый результат

2
  • Вы позволите уточню вопрос? при клики на сами миниатюры нужно что бы тоже не двигался вертикально, а просто был зафиксирован, но фото в правом слайдере (большие фото) менялись после нажатия на соответствующую миниатюру.
    – user324611
    29 мар 2019 в 6:13
  • В вашем примере - 5 миниатюр - и они все вмещаются на экран. В моем примере их 10 - специально для рассмотрения случая, когда они не вмещаются. Так вот, когда миниатюры не вмещаются, как Вы их собираетесь двигать? Если никак, то зачем Вам карусель миниатюр? Вставьте их статически. 29 мар 2019 в 14:25

Ваш ответ

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

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