Slick Center Mode Carousel

Question

---

UPDATED DEMO

Swapping Issue on second left Image on click of Next Image is Jumping,

This seems to be because on click the class is added then css is called,

is there any other way resolving this?

2. The previous Button Should be hidden on load and on click of next button it has to enable. - **Fixed**

If all the images are swapped to left, then have to hide Next Button - **Fixed**

Appreciate Your Help !!

Some JS Code For Reference :

$(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');
     }) */
})