Jquery 完成第一个动态图像滑块时遇到问题

我一直在努力使我的第一个“图像滑块”动态。这样我就可以根据自己的需要放入许多图像，当滑块到达最后一个图像时，滑块将停止移动。我做到了，但这要归功于硬编码。如果还有一个图像，它将无法正常工作

这是我的js.fiddle：

 $(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})
            }

    });







 });