javascript - 构建轮播以将元素滑动 4

Question

我目前正在构建一个 slider /旋转木马，它可以将元素滑动 4 个而不是 1 个。我设法让它以 1 为单位滑动，并将第一个元素附加到最后一个元素，反之亦然，方法是单击下一个和上一个按钮。我怎样才能让我的旋转木马滑动 4。我不想使用 Bootstrap 。

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

这是我目前正在处理的代码

<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

已更新:您更新的代码和 JSFiddle示例。

(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);