Question

I’m looking to create a bespoke slider and need some help. In theory, it should be relatively simple. I’m making it look incredibly difficult.

I’ve created two buttons – a #prev-btn and a #next-btn and I want them to toggle between three ‘slides’ of DOM elements. At the moment you’ll be screaming at me to use a slideshow plugin. However, the issue is that these aren’t actually slides, but are in fact DOM elements scattered around the page that I want to turn on/off by fading them in/out.

I have given each of the DOM elements I want to show classes named ‘.first’, ‘.second’ and ‘.third’ to correspond with which ‘phase’ I want them to show in.

<div id="1" class="first"></div>
<div id="2" class="second"></div>
<div id="3" class="third"></div>

.second, .third {display: none;}

Obviously, when .first objects are displayed, #prev-btn should fadeOut the .first objects and fadeIn .third classes. Also when .first objects are visible, #next-btn should fade out .first objects and display .second classes. You get the idea. This is the bit I’m struggling on.

I’ve had a fiddle around with addClass and removeClass, but I can’t seem to come up with an elegant solution without repeating a click function for every class added to #prev-btn AND #next-btn. Which we all know would be ridiculous (sample of laboriously ridiculous code below).

$j("#prev-btn.first").click(function(){
    $j("#prev-btn").addClass('third').removeClass('first');
    $j("#next-btn").addClass('third').removeClass('first');
    $j(".first").fadeOut(500, function(){
        $j(".third").fadeIn(500);
    });
});
$j("#next-btn.first").click(function(){
    $j("#prev-btn").addClass('second').removeClass('first');
    $j("#next-btn").addClass('second').removeClass('first');
    $j(".first").fadeOut(500, function(){
        $j(".second").fadeIn(500);
    });
});

So, as you can tell from that nonsense, I’m not yet the brightest spark at jQuery and can’t do the clever stuff just yet, so cheers in advance for the help! If anyone can implement an autoslide timer into this too, then wow – just wow. But it’s not 100% necessary. Cheers!

Answer 1

elem = ['first', 'second', 'third'];
var current = 0, previous = 0, n_elem = elem.length;
function change() {
    $j("." + elem[previous]).fadeOut(500, function(){
        $j("."+elem[current]).fadeIn(500);
    });
}
$j("#prev-btn").click(function(){
    previous = current;
    --current;
    if(current === -1) {
        current = n_elem - 1;
    }
    change();
});
$j("#next-btn").click(function(){
    previous = current;
    ++current;
    if(current == n_elem) {
        current = 0;
    }
    change();
});