Jquery show next div of same class?

Question

I have a bunch of div 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 is the load on the page, show a random ".slides" that works fine. And then when the user clicks .next or .previous, he loads the following .slides.

However, I can’t get it to work? When I click next or previous, nothing is displayed?

Any help?

Answer 1

You have to use

for the previous

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

and for the next

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

And most importantly, hide .slidesbefore showing the next one.

, $('.slides').hide(); .show() , , , ( , )

---

$('.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();
});