jquery show next div of same class?

Question

I have a bunch of div's like

            <div class="slides">
                <div id="box_bg">
                    <div class="previous"></div>
                    <img src="images/minido_pic.png" width="267" height="252" alt="MiniDo" class="img1" />
                    <div class="next"></div>
                </div>
                <div id="text1">
                    <p>MiniDo - Adobe Air App - Simplistic design wrapped around a simple iOS style window built for the Windows environment using Adobe Air.</p>
                </div>
            </div>

and a bunch of jquery

$(document).ready(function(){   
    $(".slides").hide();

        var length = $(".slides").length;
        var ran = Math.floor(Math.random()*length);
        $(".slides:nth-child(" + ran + ")").show();

    $('.previous').click(function() {
        $(".slides").parentsUntil(".slides").prev().show();
        $('.slides').hide();
    });

    $('.next').click(function() {
        $(this).parentsUntil(".slides").next().show();
        $('.slides').hide();
    });
});

Now what I want to so is on page load, show a random ".slides" which works fine. And then when a user presses ".next" or ".previous" it loads the next ".slides".

However I can't seem to get it to work? When I press next or previous it shows nothing?

Any help?

Answer 1

You should use

for previous

$(this).closest('.slides').prevAll('.slides').eq(0).show();

and for next

$(this).closest('.slides').nextAll('.slides').eq(0).show();

And the most important is to hide the .slides before you show the next one.

So the $('.slides').hide(); should be before the .show() commands otherwise, you just show the one you want and then hide all (including the one you just showed)

---

Altogether

$('.previous').click(function() {
    $('.slides').hide();
    var previous = $(this).closest('.slides').prevAll('.slides').eq(0);
    if (previous.length === 0) previous = $(this).closest('.slides').nextAll('.slides').last();
    previous.show();
});

$('.next').click(function() {
    $('.slides').hide();
    var next = $(this).closest('.slides').nextAll('.slides').eq(0);
    if (next.length === 0) next = $(this).closest('.slides').prevAll('.slides').last();
    next.show();
});