0

I'm making a carousel that puts posts from various rss feeds into a number of divs (slides). One slide shows at a time, and I have a left and right button that uses animate() to move the slides in the appropriate direction. I'm currently showing 10 slides (numbered from 0 to 9). I'd like to stop the left button from working when slide 9 is displayed, and to stop the right button from working when slide 0 is displayed in order to avoid whitespace from showing. Everything works so far, but I can't find a way to keep track of what slide I'm on in my jquery script. Here's what I have so far: this is a script that is included in the section on my wordpress site. The id #1 refers to carousel #1; #left and #right refer to the buttons.

$(document).ready(function(){

$("#1").data("slide_num",0);    

$("#1 #left").click(function(){
    if($("#1").data("slide_num") < 9){
        $("#1 .item").animate({left: "-=800px"}, 250);
        $("#1").html(function(){
            var $this = $(this);
            var $slide_num = $this.data("slide_num") + 1;
            $this.data("slide_num",$slide_num);
        });
    });
});

$("#1 #right").click(function(){
    if($("#1").data("slide_num") > 0){
        $("#1 .item").animate({left: "+=800px"}, 250);  
        $("#1").html(function(){
            var $this = $(this);
            var $slide_num = $this.data("slide_num") - 1;
            $this.data("slide_num",$slide_num);
        });
    });
});

});

What am I doing wrong? Do I need to store and keep track of a variable on the server-side? I tried using a variable named slide_num instead of the .data() method, but that didn't work either. I'd really appreciate some help on this one.

4

0 回答 0