当使用 jQuery 按下下一个或上一个按钮时，这个旋转木马 (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")
    });
});

现在，当您按下两个按钮之一时，旋转木马会在没有动画的情况下传递到下一个项目，我需要知道如何在没有插件的情况下为其设置动画。

我需要 this plugin.

编辑

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 flexbox 不是这种轮播的最佳解决方案，所以我删除了它，而且你的项目不需要隐藏，因为包装器溢出是不可见的，所以请记住我'我们稍微更改了 CSS。

这是有效的 jsfiddle：https://jsfiddle.net/lakialekscs/2ezvyx57/

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

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

当使用 jQuery 按下下一个或上一个按钮时，这个旋转木马 (ul li) 如何动画？

How animate this carousel (ul li) when press next or previous button with jQuery?

jquery

animation

carousel