Почему slick слайдер показывает 2 слайд?

Question

[WebforSelf]

Есть сайт ТЫЦ

Если добавить в корзину и посмотреть в мобильной версии, то там этапы заказа разбиты на слайды slick

Скрипт инициализации slick

var currentSize = $(window).width();
 
  var sliderMobile = function sliderMobile() {
    if (currentSize < 641) {
      $('.booking').not('.slick-initialized').slick({
        responsive: [{
          breakpoint: 9999,
          settings: "unslick"
        }, {
          breakpoint: 640,
          settings: {
            slidesToShow: 1,
            speed: 500,
            dots: false,
            arrows: false,
            touchMove: false,
            infinite: false,
            adaptiveHeight: true
          }
        }]
      });
    }
  };

  sliderMobile();
  $(window).resize(function () {
    var currentSize = $(window).width();
    sliderMobile();
    return currentSize;
  });
  $('.js-booking-nav__next').click(function () {
    $(".booking").slick('slickNext');
  });
  $('.js-booking-nav__prev').click(function () {
    $(".booking").slick('slickPrev');
  });
  $('.booking').on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
    var i = (currentSlide ? currentSlide : 0) + 1;
    $("html, body").animate({
    scrollTop: 0
    }, "slow");
    $('.step__el').each(function () {
      var current = $(this).index();
      console.log("current", current);

      if (current < i) {
        $(this).addClass("step__el--active");
      } else {
        $(this).removeClass("step__el--active");
      }

      if (current < i + 1) {
        $(this).addClass("step__el--active-border");
      } else {
        $(this).removeClass("step__el--active-border");
      }
    });

    if (i > 1) {
      $('.booking-nav').removeClass("booking-nav--start");
    } else {
      $('.booking-nav').addClass("booking-nav--start");
    }

    if (i > 3) {
      $('.booking-nav').addClass("booking-nav--end");
    } else {
      $('.booking-nav').removeClass("booking-nav--end");
    }
  }); // booking mobile === end

Только на мобильном инициируется, но не могу понять почему он захватывает часть следующих слайдов?
Центр мод не прописан.

Answer 1

[Одиночка Айс]

1. Добавить параметр variableWidth:true
2. Задать ширину контента при необходимости
3. Полагаться на то, что слик нормально растянет контент, такое себе

Comments

[WebforSelf]

А можно как то обертку для slick добавить? а уже с блоком где вся инфа растягивать css?

[Одиночка Айс]

WebforSelf, Вы про дурацкую привычку слика активному блоку давать ширину 100%? Можно. Обычно для блоков делаю нечто такое:

$(".item").each(function () {
	$(this).wrap("<div></div>");
});

[WebforSelf]

Одиночка Айс, доп обертка решила проблему)

[WebforSelf]

Одиночка Айс, странно но после того как обертку поставил) перестали фокусироваться input на мобильном. Нажимаю - он пытается открыть клавиатуру и тут же закрывает)

[Одиночка Айс]

WebforSelf, на слике или по всему сайту? Очень странно) Смотрите какие скрипты еще взаимодействуют с инпутами.