CODEWITHSUNDEEP
jqueryhtmlcss
Shobi
Shobi

Reputation: 51

how i get width of div and then animate with jquery

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'});
});

Upvotes: 2

Views: 151

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195972

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});
        }
    });
});

Upvotes: 1

Related Questions