Question

i have a problem with select client area slides please review below link

Demo

right now here is 10 imgs but it just slide and show 6 images,

i want thumbnailscroller width to scroll untill images finished.

<div class="inner_right_main_tow thumbnailscroller">Content here</div>

and here is jquery code,

$(".carousel-next").click(function(){
     $(this).parents(".thumbnailscroller").find("ul").animate({left: '-710px'});
});

$(".carousel-previous").click(function(){
     $(this).parents(".thumbnailscroller").find("ul").animate({left: '0'});
});

Answer 1

This happens because you give it a fixed location to scroll to -710px

You need to make this dynamic with -=710px. This means that each time you click it will move 710 pixels to the left.

$(".carousel-next").click(function(){
     $(this).parents(".thumbnailscroller").find("ul").animate({left: '-=710px'});
});

But now you need to handle the when to stop..

---

Update to handle stopping (gets more complicated)

I would change the CSS to make it easier..

CSS fixes

• Remove the 9999px from the .carousel rule.

• For the .thumbnailscroller .carousel ul add

  white-space:nowrap;
  display:inline-block;
  

• and for the .inner_right_main_tow li remove the float:left and add

  display:inline-block;
  

jQuery

$(window).load(function(){
    var ul = $('.thumbnailscroller').find('ul'),
        step = ul.closest('.thumbnailscroller').width(),
        maxLoc = step - ul.width();

    $(".carousel-next").click(function(){
        var animated = ul.is(':animated'),
            currentLoc = parseInt(ul.css('left'),10),
            nextPos = Math.max(maxLoc, currentLoc -step); 

        if (!animated){
            ul.animate({left: nextPos});
        }
    });
    $(".carousel-previous").click(function(){
        var animated = ul.is(':animated'),
            currentLoc = parseInt(ul.css('left'),10),
            nextPos = Math.min(0, currentLoc +step); 

        if (!animated){
            ul.animate({left: nextPos});
        }
    });
});