在最后一张幻灯片上停止幻灯片

Question

Here is the code

I have created custom slider using jQuery.

I want it to stop at the last slide.

$(document).ready(function(){
   var slideCount = $('.billAddress .addressBlock').length
  var outerWidth = slideCount * 273
  $('.billAddressCnt').css({
    width: outerWidth,
    left: 0
  })
 })

var i = 0;
$('.nextBillAddress').click(function(){   
   i++
   var leftMove = 273*i
   $('.billAddressCnt').animate({
     left : -leftMove
   })
})

Answer 1

You can add sliderPosition variable and decrease it every time you move slider. When it is 0 or 1 (based on what you want) - stop sliding. The code will be like this

$(document).ready(function(){
    var slideCount = $('.billAddress .addressBlock').length
    var sliderPosition = slideCount
    var outerWidth = slideCount * 273
    $('.billAddressCnt').css({
      width: outerWidth,
      left: 0
    })
})

var i = 0;
$('.nextBillAddress').click(function(){   
    i++
    if (sliderPosition == 1) {
        return false;
    }
    sliderPosition--;
    var leftMove = 273*i
    $('.billAddressCnt').animate({
        left : -leftMove
   })
})

There is also a possibility to do things using more advanced way like creating slider object, implement counter and slider there.

Answer 2

unbind the event haandler when reaches the last div. add this line to the first of your function.

if(i + 1 === $('.addressBlock').length) $('.nextBillAddress').unbind( "click", arguments.callee );