上一张幻灯片后如何停止动画？

Question

I have created custom plugin for image slider. It is like pass parameter of no of images to display. How to stop animation once the last image is visible? Sometimes issue with previous click also. Help me to optimize code.

CSS

.imgpresentation {
width: 520px;
height: 110px;
overflow: hidden;
border: 1px solid #ddd;
position: relative;
}
.imgpresentation img {
 float: left;
 padding: 5px;
}
.imgpresentation .prev {
left: 0;
position: absolute;
top: 40%;
}
.imgpresentation .next {
right: 0;
position: absolute;
top: 40%;
 }
.slidethemimgpresentation {
position: absolute;
}

JS

<script>
$.fn.imgSlider = function(nImages) {
var imgW = $(this).find('img').outerWidth(),
    imgH = $(this).find('img').outerHeight(),
    imgL = $(this).find('img').length,
    that = $(this),
    container = that.find('.slidethemimgpresentation');

that.append('<a href="#" class="prev">Previous</a>'+
' <a href="#" class="next">Next</a>').css({
    'width': nImages * imgW,
    'height': imgH
});
container.css({
    'width': imgW * imgL
});

imgW = nImages * imgW;

that.find('.next').on('click', function() {
    var currLeft = parseInt(container.css('left'));
    currLeft += -imgW;
    container.animate({
        'left': currLeft
    });
    return false;
});
that.find('.prev').on('click', function() {
    var currLeft = parseInt(container.css('left'));
    if (currLeft == 0) {
        return false;
    }
    currLeft += imgW;

    container.animate({
        'left': currLeft
    });
    return false;
});
};
$(document).ready(function() {
  $('#imgpresentation').imgSlider(2);
  $('#imgpresentation2').imgSlider(3);
  $('#imgpresentation3').imgSlider(4);
  $('#imgpresentation4').imgSlider(1);
});
</script>

html `

<div id="imgpresentation4" class="imgpresentation">
    <div class="slidethemimgpresentation">
        <img class="presentatinthis" src="http://placehold.it/150x150&text=Slide301" />
        <img class="presentatinthis" src="http://placehold.it/150x150&text=Slide302" />
        <img class="presentatinthis" src="http://placehold.it/150x150&text=Slide303" />
        <img class="presentatinthis" src="http://placehold.it/150x150&text=Slide304" />
        <img class="presentatinthis" src="http://placehold.it/150x150&text=Slide305" />
    </div>
</div>
<div id="imgpresentation" class="imgpresentation">
    <div id="slidethemimgpresentation" class="slidethemimgpresentation">
        <img class="presentatinthis" src="http://placehold.it/250x100&text=Slide101" />
        <img class="presentatinthis" src="http://placehold.it/250x100&text=Slide102" />
        <img class="presentatinthis" src="http://placehold.it/250x100&text=Slide103" />
        <img class="presentatinthis" src="http://placehold.it/250x100&text=Slide104" />
        <img class="presentatinthis" src="http://placehold.it/250x100&text=Slide105" />
        <img class="presentatinthis" src="http://placehold.it/250x100&text=Slide106" />
        <img class="presentatinthis" src="http://placehold.it/250x100&text=Slide107" />
        <img class="presentatinthis" src="http://placehold.it/250x100&text=Slide108" />
        <img class="presentatinthis" src="http://placehold.it/250x100&text=Slide109" />
        <img class="presentatinthis" src="http://placehold.it/250x100&text=Slide110" />
    </div>
</div>
<div id="imgpresentation2" class="imgpresentation">
    <div class="slidethemimgpresentation">
        <img class="presentatinthis" src="http://placehold.it/250x100&text=Slide201" />
        <img class="presentatinthis" src="http://placehold.it/250x100&text=Slide202" />
        <img class="presentatinthis" src="http://placehold.it/250x100&text=Slide203" />
        <img class="presentatinthis" src="http://placehold.it/250x100&text=Slide204" />
        <img class="presentatinthis" src="http://placehold.it/250x100&text=Slide205" />
        <img class="presentatinthis" src="http://placehold.it/250x100&text=Slide206" />
        <img class="presentatinthis" src="http://placehold.it/250x100&text=Slide207" />
        <img class="presentatinthis" src="http://placehold.it/250x100&text=Slide208" />
        <img class="presentatinthis" src="http://placehold.it/250x100&text=Slide209" />
        <img class="presentatinthis" src="http://placehold.it/250x100&text=Slide210" />
    </div>
</div>
<div id="imgpresentation3" class="imgpresentation">
    <div class="slidethemimgpresentation">
        <img class="presentatinthis" src="http://placehold.it/350x150&text=Slide301" />
        <img class="presentatinthis" src="http://placehold.it/350x150&text=Slide302" />
        <img class="presentatinthis" src="http://placehold.it/350x150&text=Slide303" />
        <img class="presentatinthis" src="http://placehold.it/350x150&text=Slide304" />
        <img class="presentatinthis" src="http://placehold.it/350x150&text=Slide305" />
        <img class="presentatinthis" src="http://placehold.it/350x150&text=Slide306" />
        <img class="presentatinthis" src="http://placehold.it/350x150&text=Slide307" />
        <img class="presentatinthis" src="http://placehold.it/350x150&text=Slide308" />
        <img class="presentatinthis" src="http://placehold.it/350x150&text=Slide309" />
        <img class="presentatinthis" src="http://placehold.it/350x150&text=Slide310" />
    </div>
</div>

Answer 1

Thats a slightly tricky way of doing it. Because it's not being driven by an array, rather moving container += X each time.

You'll need to check for if( container.style.left + imgW > totalWidth ) To debug try using console.log( container.style.left )

I'd reccomend using an existing slider, iDangerio.us Swiper is really good with a great API.

Also on a side note, this is slightly inefficient, not that it matters too much because it's only being run on init.

var imgW = $(this).find('img').outerWidth(),
imgH = $(this).find('img').outerHeight(),
imgL = $(this).find('img').length,
that = $(this),
container = that.find('.slidethemimgpresentation')

It would be better practice and more efficient to only parse the jquery object once.

var that = $(this),
img = that.find('img'),
imgW = img.outerWidth(),
imgH = img.outerHeight(),
imgL = img.length,
container = that.find('.slidethemimgpresentation'),
totalWidth = imgW * imgL;