无法完成我的第一个动态图像滑块

Question

我一直试图让我的第一个“图像滑块”动态化。因此我可以根据需要放入许多图像，当滑块到达最后一张图像时仍然会停止移动。我有点这样做，但只是感谢硬编码。如果有一个图像更多，它将无法正常工作。

这是我的js.fiddle：http://jsfiddle.net/Wilkraft/x24pbc0d/

 $(document).ready(function(){
$('img').on('click',function(){
     $(this).clone().prependTo('#main-img').css({'width':'100%','height':'100%'});
    var prd = $('#main-img').children('img:nth-child(2)');

    if(prd){
    prd.remove();

        }
    });



var sliderUL = $('div.slider').css({'overflow':'hidden'}).children('ul'),
    imgs = sliderUL.find('img'),
    SLwidth = sliderUL.width,
    imgWidth = imgs[0].width,
    imgLen = imgs.length,
    LIL = sliderUL.children('li').last(),
    current = 1,
    totalImgW = imgLen * imgWidth;



$('#buttons').find('button').on('click',function(){
    var direction = $(this).data('dir'),
    loc = imgWidth;

    (direction === 'next') ? ++current : --current ;


    console.log(current);


    if(current === 0){
        current = 1;
        loc=0;


        } else if (current === 4){
            current = 3;
            loc = 0;

            }


    if(direction === 'next') {
        $('div.slider').find('ul').animate({'margin-left':'-=' + loc})

        } else if (direction === 'prev'){

                $('div.slider').find('ul').animate({'margin-left':'+=' +loc})
            }

    });







 });