当使用jQuery按下next或前级按钮时，这个旋转木马(ul li)有多有生命力？

Question

当按下两个按钮(下一个、前一个)中的一个时，我需要旋转木马的元素来制作动画，当它们转到右边或左边并输入新元素时。

问题是，我不知道如何开始动画旋转木马。

这里我有一个JSfiddle

(function($) {
    $.fn.scrollList = function(numVisibleItems) {
        var visibleItems = numVisibleItems.visibleItems;
        var $carousel = $(this);
        var $slideItems = $("li", this);
        var $firstItem;

        var setCurrentItems = function() {
            $slideItems.hide();
            $('.current-scroll-list', $carousel).removeClass('current-scroll-list');
            $currentItems = $("li:nth-child(-n+" + visibleItems + ")", $carousel);
            $currentItems.addClass('current-scroll-list').show();
        }

        var nextItem = function() {
            $firstItem = $("li:nth-child(-n+" + visibleItems + ")", $carousel);
            $carousel.append($firstItem);
            setCurrentItems();
        }

        var previousItem = function() {
            $lastItem = $("li:nth-last-child(-n+" + visibleItems + ")", $carousel);
            $carousel.prepend($lastItem);
            setCurrentItems();
        }

        function addArrows() {
            if ($slideItems.length > visibleItems) {
                if ($($carousel).parent().find(".next").length == 0 && $($carousel).parent().find(".previous").length == 0) {
                    $carousel.parent().append('<span class="carousel-btn previous">&#10148;</span>');
                    $carousel.parent().append('<span class="carousel-btn next">&#10148;</span>');
                }
                $($carousel).siblings(".next").click(nextItem);
                $($carousel).siblings(".previous").click(previousItem);
            }
        }

        setCurrentItems();
        addArrows();
    };
})(jQuery);

$(document).ready(function() {
    $(".num-list").scrollList({
        visibleItems: $(".num-list").data("numitems")
    });
});

现在，当你按下两个按钮之一的旋转木马传递到下一个项目没有动画，我需要知道如何动画这没有插件。

我需要像这个插件这样的东西。

编辑

HTML：

<div class="wrap gradient_bg">
    <ul class="list-4 num-list" data-numitems="4">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
</div>

CSS：

.carousel-btn{
    position: absolute;
    background: rgba(255, 255, 255, 0.5);
    padding: 0.5em;
    z-index: 1;
    top: 5px;
    cursor: pointer;
}
.carousel-btn.previous{
    left: 0;
    padding-right: 2em;
    transform: rotate(180deg);
    top: 7px;
}
.carousel-btn.next{
    right: 0;
    padding-left: 2em;
}

ul{
    display: flex;
    justify-content: space-around;
    list-style: none;
    padding: 0;
}

Answer 1

JSfiddle

CSS柔性盒并不是这种旋转木马的最佳解决方案，所以我已经删除了它，而且您的项目不需要隐藏，因为包装溢出是不可见的，所以请记住，我已经稍微更改了CSS。

以下是工作中的小提琴：https://jsfiddle.net/lakialekscs/2ezvyx57/

这是动画解决方案。将ul元素移动到左侧，动画完成后，重置位置并显示下一张幻灯片。这是一个粗糙的代码，但你可以从这里拿走它，使它美丽。

       $('ul').animate({
         left: $('ul').position().left - $('ul').width() + "px"
       }, 200, function() {
         $('ul').css({
            "left": "auto",
            "right": "auto"
         });
       });