javascript - How to stop animation after last slide? -

i have created custom plugin image slider. pass parameter of no of images display. how stop animation once last image visible? issue previous click also. me 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,     = $(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> 

thats tricky way of doing it. because it's not being driven array, rather moving container += x each time.

you'll need check if( container.style.left + imgw > totalwidth ) debug try using console.log( container.style.left )

i'd reccomend using existing slider, idangerio.us swiper great api.

also on side note, inefficient, not matters because it's being run on init.

var imgw = $(this).find('img').outerwidth(), imgh = $(this).find('img').outerheight(), imgl = $(this).find('img').length, = $(this), container = that.find('.slidethemimgpresentation') 

it better practice , more efficient parse jquery object once.

var = $(this), img = that.find('img'), imgw = img.outerwidth(), imgh = img.outerheight(), imgl = img.length, container = that.find('.slidethemimgpresentation'), totalwidth = imgw * imgl;