圆滑中心模式旋转木马

UPDATED DEMO

点击下一个图像时,左二个图像的交换问题正在跳跃,

这似乎是因为在单击时添加了类,然后调用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');
     }) */
})