jquery - Li タグを最初の li から最後の li に移動して、スライダーを連続的にループさせる方法

Question

他の画像を通過して最初の画像に戻ることなく、スライダーを最初の画像にループさせようとしていますが、代わりに、次の矢印が押されるたびに最初の Li タグを最後の Li タグに追加して、常に以前のLiタグは、画像が最後まで内側にあります。また、以前のものでも動作する必要があります。

これは私がこれまでに得た距離です：

HTML:

<div class="slider corners">
        <ul>
            <li class="corners"><span class="corners"></span><img src="../images/slider/image_1.png" width="854" height="393" alt="Image" /></li>
            <li class="corners"><span class="corners"></span><img src="../images/slider/image_2.png" width="854" height="393" alt="Image" /></li>
            <li class="corners"><span class="corners"></span><img src="../images/slider/image_3.png" width="854" height="393" alt="Image" /></li>
        </ul>                                              
</div>
<div id="slider-nav">
    <button class="left_arrow" data-dir="prev"></button>
    <button class="right_arrow" data-dir="next"></button>
</div>

Jクエリ:

$(function() {
var sliderUL = $('div.slider').css('overflow', 'hidden').children('ul'),
    imgs = sliderUL.find('img'),
    imgWidth = imgs[0].width,
    imgsLen = imgs.length,
    current = 1, 
    totalImgsWidth = imgsLen * imgWidth; 

$('#slider-nav').show().find('button').on('click', function() {
    var direction = $(this).attr('data-dir'),
    loc = imgWidth;     

    if ( direction === 'next' ) {
            $('.slider li').first().insertAfter( '.slider li:last');
        }else if ( direction === 'prev' ) {
            $('.slider li:last').insertAfter('.slider ul');
        }

    transition(sliderUL, loc, direction);
}); 

function transition( container, loc, direction ) {
    var unit; // -= +=

    if ( direction && loc !== 0 ) {
        unit = ( direction === 'next' ) ? '-=' : '+=';
    }

    container.animate({
        'margin-left': unit ? (unit + loc) : loc
    });
}

});

それが明らかなのか、それとも私がこれを完全に間違っていたのか疑問に思っていました。