jquery mostrar siguiente div de la misma clase?

Question

que tienen un montón de divs como

  <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> 

y un montón de 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(); 
    }); 
}); 

Ahora lo que quiero por lo que es al cargar la página, muestran una al azar ".slides", que funciona bien. Y luego, cuando un usuario presiona ".next" o ".previous", carga el siguiente ".slides".

Sin embargo, parece que no puedo hacerlo funcionar? Cuando presiono siguiente o anterior, ¿no se muestra nada?

¿Algún ayuda?

Answer 1

Debe utilizar

para la anterior

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

y para el próximo

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

Y lo más importante es ocultar el .slides antes de mostrar la siguiente.

Así que la $('.slides').hide(); debe ser antes de que los comandos .show() de otro modo, sólo muestran el que desee y luego se esconden todos (incluyendo el que usted acaba de aparecer)

---

En total

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