Question

Hey!
I am trying to code a simple content/image rotating banner that I can click left or right arrows to rotate the content..

I have everything coded and it works but in a very beginners way and would really appreciate a better, more robust way to do it.

jQuery("span.left-arrow").click(function() {
    var visible = jQuery("#home_slider .slide:visible").attr("id");
    var slide1 = jQuery("#home_slider #slide1");
    var slide2 = jQuery("#home_slider #slide2");
    var slide3 = jQuery("#home_slider #slide3");
    if (jQuery(visible == "slide1")) {
        jQuery("#home_slider #slide1:visible").fadeOut(function() {
            slide3.fadeIn();
        });
    }
    if (jQuery(visible == "slide2")) {
        jQuery("#home_slider #slide2:visible").fadeOut(function() {
            slide1.fadeIn();
        });
    }
    if (jQuery(visible == "slide3")) {
        jQuery("#home_slider #slide3:visible").fadeOut(function() {
            slide2.fadeIn();
        });
    }
});
// right arrow
jQuery("span.right-arrow").click(function() {
    var visible = jQuery("#home_slider .slide:visible").attr("id");
    var slide1 = jQuery("#home_slider #slide1");
    var slide2 = jQuery("#home_slider #slide2");
    var slide3 = jQuery("#home_slider #slide3");
    if (jQuery(visible == "slide1")) {
        jQuery("#home_slider #slide1:visible").fadeOut(function() {
            slide2.fadeIn();
        });
    }
    if (jQuery(visible == "slide2")) {
        jQuery("#home_slider #slide2:visible").fadeOut(function() {
            slide3.fadeIn();
        });
    }
    if (jQuery(visible == "slide3")) {
        jQuery("#home_slider #slide3:visible").fadeOut(function() {
            slide1.fadeIn();
        });
    }
});

Thanks for the help!

Answer 1

Something like this perhaps:

EDIT: the click handlers will now allow you to “loop” forward and backwards.

// a reference to the currently shown slide
// you will have to initialize this somewhere
var currentSlide;

jQuery("span.left-arrow").click(function() {
    currentSlide.fadeOut(function(){
        // if it has a previous sibling, use the previous sibling
        // otherwise set it to the last slide
        currentSlide = currentSlide.prev().length ? currentSlide.prev() : currentSlide.siblings().last();
        currentSlide.fadeIn();
    });
}

jQuery("span.right-arrow").click(function() {
    currentSlide.fadeOut(function(){
        currentSlide = currentSlide.next().length ? currentSlide.next() : currentSlide.siblings().first();
        currentSlide.fadeIn();
    });
}

Using this method you don’t have to give each slide a unique ID, but the slide elements must be the only children of #home_slider.

You could initialize with something like:

jQuery(function(){
    // this loops through all slides when the page loads and
    // assigns the first slide to the variable currentSlide
    // and hides all the others
    jQuery("#home_slider").children().each(function(index){
        index == 0 ? currentSlide = jQuery(this) : jQuery(this).hide();
    });
}