Quiero cambiar el orden de mis divs secundarios en el div principal, cada 2 segundos sin interacciones (girar solo si la página está cargada:
El primer hijo debe pasar al tercer hijo, el segundo hijo debe pasar al primer hijo y el tercer hijo debe pasar al segundo hijo
El segundo y tercer hijo siempre deben tener la clase "pequeño" y cuando lleguen a la posición del primer hijo deben eliminarse.
HTML
<div class="inner-testimonial"> <div class="slide"> <h4>Copy here</h4> </div> <div class="slide small"> <h4>Copy here</h4> </div> <div class="slide small"> <h4>Copy here</h4> </div> </div>JQuery
$(".inner-testimonial .slide:nth-child(1)").removeClass('small'); $(".inner-testimonial .slide:nth-child(2)").addClass('small'); $(".inner-testimonial .slide:nth-child(3)").addClass('small');¿Cómo puedo hacer esto?
Puedes hacerlo así:
El orden del primer cambio será: 2 3 1
El orden del segundo cambio será: 3 1 2
Y luego el orden volverá a su punto inicial: 1 2 3
Gracias por validar y votar mi respuesta si hace lo que esperas.
setInterval(function () { // remove small class for all slides $('.inner-testimonial .slide').removeClass("small"); // set different var with each slides positions var firstEl = $('.inner-testimonial .slide:first'); var secondEl = $('.inner-testimonial .slide:first').next(); var thirdEl = $('.inner-testimonial .slide:last'); // set slides container empty $('.inner-testimonial').empty(); // append slides in right order : secondEl + thirdEl + firstEl $('.inner-testimonial').append(secondEl); $('.inner-testimonial').append($(thirdEl).addClass("small")); $('.inner-testimonial').append($(firstEl).addClass("small")); }, 2000); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="inner-testimonial"> <div id="first"></div> <div class="slide"> <h4>First</h4> </div> <div class="slide small"> <h4>Second</h4> </div> <div class="slide small"> <h4>Third</h4> </div> </div> <div id="test"></div>