Why does slick slider show 2nd slide?

Question

JavaScript

There is a website TYTS

If you add it to the cart and view it in the mobile version, then the order stages are divided into slides slick

slick initialization script

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

Only mobile initiates but can't figure out why it grabs part of the next slides?
The fashion center is not registered.

Answer 1

1. Add a parameter variableWidth:true
2. Set the content width if necessary
3. Rely on the fact that the slick will stretch the content normally, such to itself