Building a carousel to slide items by 4

Question

I'm currently building a slider/carousel that could slide items by 4 instead of 1. I managed to make it slide 1 by 1 and append the first element to the last and vice versa by clicking the next and prev buttons. How can I make my carousel slide by 4. I would prefer not to use bootstrap.

https://jsfiddle.net/clestcruz/jhz09efj/4/

Here is the code that i'm currently working on

<div class="wrapper">
    <div class='carousel -aim-partners'>

        <div class='item-list'>
            <ul>
              <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>
              <li>10</li>
              <li>11</li>
              <li>12</li>
              <li>13</li>
              <li>14</li>
              <li>15</li>
              <li>16</li>             

            </ul>
        </div>


        <ul class="btns">
            <li class="prev">
                <i class="fa fa-angle-left" aria-hidden="true">prev</i>
            </li>
            <li class="next">
                <i class="fa fa-angle-right" aria-hidden="true">next</i>
            </li>
        </ul>

    </div>
</div>

---

.carousel {
    position : relative;

    .item-list {
        overflow : hidden;

        ul {
            display       : flex;
            flex-wrap     : wrap;
            list-style    : none;
            margin-bottom : 10px;
            position      : relative;
            left          : -257px;
            overflow      : hidden;


        }

    }

    .btns {
        width    : 100%;
        z-index  : 10;
        top      : 50%;

        @extend .columns;
        @extend .-items-center;
        @extend .-space-between;

        li {
            display : inline-block;
            cursor  : pointer;
        }
    }



    &.-aim-partners {
        position : relative;

        .item-list {
            max-width : 1204px;
            margin    : 0 auto;
        }

        .item-list ul li {
            flex              : 0 230px;
            width             : 300px;  
            padding           : 0px;
            height            : 110px;
            margin-top        : 10px;
            margin-bottom     : 10px; 
            margin-left       : 5px; 
            margin-right      : 5px;  
            background-size   : contain;
            background-repeat : no-repeat;
            background-position : center;

        }

        .btns {
            width : 110%;
            left  : -70px;

            li {
                width  : 35px;
                height : 40px;

                &.prev {
                    background : url('../images/carousel-icon-arrow.png') no-repeat 15px 0;
                }

                &.next {
                    background : url('../images/carousel-icon-arrow.png') no-repeat -20px 0;
                }

            }

        }

    }

}

---

(function ($) {
    'use strict';

    var carousel = {


        init : function() {


            var carouselWidth = 0;

            // Set Container Width
            $('.carousel .item-list ul').children().each(function() {
                carouselWidth += $(this).outerWidth();
                $('.carousel .item-list ul').width(carouselWidth + 1000);
            });

            //Click to Slide Right
            $('.btns .next').click(function(){

                var itemWidth = $('.carousel .item-list ul li').outerWidth() + 10;
                var leftIndent = parseInt($('.carousel .item-list ul').css('left')) - itemWidth;

                $('.carousel .item-list ul:not(:animated)').animate({'left' : leftIndent}, 500,function(){    
                    $('.carousel .item-list ul').append($('.carousel .item-list ul li:first')); 
                    $('.carousel .item-list ul').css({'left' : '-' + itemWidth + 'px'});
                }); 
            });

            //Click to Slide Left
            $('.btns .prev').click(function(){

                var itemWidth = $('.carousel .item-list ul li').outerWidth() + 10;
                var leftIndent = parseInt($('.carousel .item-list ul').css('left')) + itemWidth;

                $('.carousel .item-list ul:not(:animated)').animate({'left' : leftIndent}, 500,function(){    
                    $('.carousel .item-list ul').prepend($('.carousel .item-list ul li:last'));                  
                    $('.carousel .item-list ul').css({'left' : '-' + itemWidth + 'px'});
                });


            });


        }

    }

    $(document).ready(function(){
        carousel.init();
    });

})(jQuery);

Answer 1

Updated: Your updated code and a JSFiddle example.

(function ($) {
    'use strict';

    var carousel = {

        init : function() {

            var carouselWidth = 0;

            // Set Container Width
            $('.carousel .item-list ul').children().each(function() {
                carouselWidth += $(this).outerWidth();
                $('.carousel .item-list ul').width(carouselWidth + 1000);
            });

            $('.btns .next').click(function(){

                var itemWidth = $('.carousel .item-list ul li').outerWidth() + 10;
                var leftIndent = parseInt($('.carousel .item-list ul').css('left')) - itemWidth;

                function animate( repeat, speed ) {
                    $('.carousel .item-list ul:not(:animated)').animate({'left' : leftIndent}, speed,function(){
                        $('.carousel .item-list ul').append( $('.carousel .item-list ul li:first') );
                        $('.carousel .item-list ul').css({'left' : '-' + itemWidth + 'px'});

                        if ( repeat > 1 ) {
                            animate( ( repeat - 1 ), speed );
                        }
                    });
                }

                animate( 4, 100 );

            });

            $('.btns .prev').click(function() {

                var itemWidth = $('.carousel .item-list ul li').outerWidth() + 10;
                var leftIndent = parseInt($('.carousel .item-list ul').css('left')) + itemWidth;

                function animate( repeat, speed ) {
                    $('.carousel .item-list ul:not(:animated)').animate({'left' : leftIndent}, speed,function(){
                        $('.carousel .item-list ul').prepend($('.carousel .item-list ul li:last'));
                        $('.carousel .item-list ul').css({'left' : '-' + itemWidth + 'px'});

                        if ( repeat > 1 ) {
                            animate( ( repeat - 1 ), speed );
                        }
                    });
                }

                animate( 4, 100 );

            });

        }

    }

    $(document).ready(function(){
        carousel.init();
    });

})(jQuery);