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

I need the elements of the carousel when pressing one of the two buttons (next, previous) to make an animation as they go to the right or left and enter the new elements.

The problem is that I don't know how to start animating the carousel.

Here I have a 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")
    });
});

Now when you press one of the two buttons the carousel pass to the next items without animation, I need know how animate this without plugins.

I need something like this plugin.

Edit

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;
}

Solution

JSfiddle

The CSS flexbox is not the best solution for this kind of carousel so I've removed it and also your items does not need to be hidden because wrapper overflow is not visible so keep in mind I've change the CSS a bit.

Here's working jsfiddle: https://jsfiddle.net/lakialekscs/2ezvyx57/

Here's the animation solution. Move the ul element to the left and after animation is complete reset the position and show next slides. It's a crude code but you can take it from here and make it beautiful.

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