Как исправить ошибку в slick слайдере?

Question

[Александр]

Юзаю слик, подскажите пож-ста как исправить этот бред
Если картинки в navFor блоке 2 или 3, то они скачут криво, можно сделать как-то чтобы они не скролились?

Картинка

Код инициализации слайдера

$('.product-slider-big').slick({
  	slidesToShow: 1,
  	slidesToScroll: 1,
    infinite: true,
    fade: true,
  	asNavFor: '.product-slider-small',
  	arrows: true,
    prevArrow: '<div class="prev"><i class="fal fa-angle-left"></i></div>',
    nextArrow: '<div class="next"><i class="fal fa-angle-right"></i></div>',
    responsive: [
      {
        breakpoint: 460,
        settings: {
      	   arrows: false,
        }
      }
    ]
  });
  $('.product-slider-small').slick({
  	slidesToShow: 3,
  	slidesToScroll: 3,
    infinite: true,
  	asNavFor: '.product-slider-big',
    centerMode: true,
    centerPadding: '0px',
    focusOnSelect: true,
  	arrows: true,
    prevArrow: '<div class="prev"><i class="fal fa-angle-left"></i></div>',
    nextArrow: '<div class="next"><i class="fal fa-angle-right"></i></div>'
  });

Если картинки 4 и более, как тут, то все ок

Answer 1

[profesor08]

Да никак. Либо не используй слик, либо не используй навигацию. Переключайся по стрелкам так-же как и переключаешься по клику на мелкую картинку.

Вообще, этот случай это пример того, где слик неуместен. Имхо, но я бы не использовал там никаких слайдеров.

Comments

[Александр]

Посоветуй плз аналог, если тебе известен

[profesor08]

Свое мнение я оставил - слайдер там не нужен. Горизонтальная прокрутка миниатюр и смена картинки по клику. Первая часть это css, вторая это 3 строки кода на js.

Answer 2

[Elwen]

Попробуйте отключить у слайдера с превью centerMode, что бы слик не выпихивал активный слайд в центр.

Answer 3

[tyzberd]

проверяйте количество картинок, и после этого запускайте инициализацию с/без centerMode...