Карусель Slick Center Mode

Question

---

ОБНОВЛЕНО ДЕМО

Проблема свопинга на втором левом изображении При щелчке следующего изображения прыгает,

Кажется, это потому, что при клике класс добавляется, затем вызывается css,

Есть ли другой способ решить эту проблему?

2.Предыдущая кнопка должна быть скрыта при загрузке и при нажатии следующей кнопки должна быть включена.- ** Исправлено **

Если все изображения поменялись местами влево, нужно скрыть кнопку «Далее» - ** Исправлено **

Цените вашу помощь !!

Некоторые JS код для справки:

$(function () {
    var docWidth, docHeight, winWidth, winHeight;
    var screenXs = 325;
    var screenSm = 600;
    var screenMd = 1040;
    var screenLg = 1280;
    var screenXLg = 1800;

    function createFilmStrip() {
        var filmSlides = 1;
        var centerModeFlag = false;

        $(".filmstrip-carousel").each(function () {
            if ($(this).find(".slider").hasClass("slick-slider")) {
                $(this).find(".slider").find(".slick-slide").removeClass("slick-left slick-right slick-normal slick-middle slick-active slick-cloned");
                $(this).find(".slider").slick("unslick");
            }
            $(this).find(".slider").slick({
                 dots: false,
                infinite: false,
                speed: 200,
                slidesToShow: 1,
                centerMode: true,
                variableWidth: true,
                autoplay: false,
                centerPadding: '10px',
                adaptiveHeight: false,
                arrows: true

            });
        });
    }
    createFilmStrip();

    function updateSlideScales(slick, currentSlide, nextSlide) {
        /* if (winWidth > screenSm) { */
        console.log(nextSlide)
        $.each(slick.$slideTrack[0].children, function (key, value) {

            $(this).removeClass("slick-left slick-right slick-middle slick-normal");
   var thisIndex = $(this).data("slick-index");
            if (thisIndex == nextSlide - 1) {
                //debugger;
                shiftCard(this, "slick-left")
            }
            else {
                if (thisIndex == nextSlide + 1) {
                    shiftCard(this, "slick-right")
                }
                else {
                    if (thisIndex == nextSlide) {
                        shiftCard(this, "slick-middle");
                    }
                    else {
                        shiftCard(this, "slick-normal");
                    }
                }
            }
            /* } */
        })
    }

    function shiftCard(clip, position) {
        $(clip);
        $(clip).addClass(position);
    }

    $(".filmstrip-carousel .slider")
        .on('afterChange init', function (event, slick, direction) {
            console.log('afterChange/init', event, slick, slick.$slides);
            // remove all prev/next
            slick.$slides.removeClass('prevdiv').removeClass('nextdiv');

            for (var i = 0; i < slick.$slides.length; i++) {
                var $slide = $(slick.$slides[i]);

                if ($slide.hasClass('slick-current')) {
                    $slide.prev().prev().addClass('prevdiv');
                    $slide.next().addClass('nextdiv');
                    break;
                }

            }

        }
        )
        .on("beforeChange ", function (event, slick, currentSlide, nextSlide, prevSlide) {
            if (!$(this).hasClass("non-overlapping")) updateSlideScales(slick, currentSlide, nextSlide);

            for (var i = 0; i < slick.$slides.length; i++) {
                var $slide = $(slick.$slides[i]);

                if ($slide.hasClass('slick-current')) {
                    $slide.prev().prev().addClass('prevdiv');
                    $slide.next().addClass('nextdiv');
                    break;
                }

            }
            slick.$slides.removeClass('prevdiv').removeClass('nextdiv');
        });

    $(".filmstrip-carousel .slider").slick("slickGoTo", 0);

    /*  $('.slick-slider .slick-arrow.slick-next').on('click', function () {
         //alert('hi')
         $(this).parents().find('.slick-prev').css('display', 'block !important');
     }) */
})