CODEWITHSUNDEEP
javascriptjquery
Mona Coder
Mona Coder

Reputation: 6316

Issue on Stop Sliding a List to Left and Right on First and Last Child

I am trying to create a simple Carousel slider at This Demo. As you can see the slider works fine! but I do not know how to stop it at both end(left and right) side. I mean how can I control to disable the left btn when the first child of ul is the first displaying( visible) item at left and disable the Right btn while the last child of <ul> is rendering in the .well box?

Here is the simple code which I have so far:

$(".leftslide").on("click",function(){
   $(".list-inline").animate({left:'-=187px'}, 300);   
});
$(".rightslide").on("click",function(){
   $(".list-inline").animate({left:'+=187px'}, 300);   
});

var maginLeft =  $("ul>:first-child").css("marginLeft");
var maginRight = $("ul>:last-child").css("marginRight");

alert(maginLeft + maginRight );

I tried to control this by using var maginLeft = $("ul>:first-child").css("marginLeft"); but it didnt do the job!

Thanks,

Upvotes: 0

Views: 76

Answers (1)

juvian
juvian

Reputation: 16068

You would need to do something like this:

$(".leftslide").on("click",function(){
    rightbtn.removeAttr("disabled");
    current++;
    if(current+images_shown >= images.length) {
         leftbtn.attr("disabled","disabled")
    }
    console.log(imageWidth+offset);  
    var qty=Math.ceil(imageWidth+offset);
    if(current+images_shown==images.length) qty+=offset;
    list.animate({left:'-='+qty+'px'}, 300);

});

Full code: http://jsfiddle.net/juvian/CXRP5/6/

You still need to do something about clicking several times before animation ends though, but this should give you an idea of how to approach the problem

Upvotes: 2

Related Questions