I want to change the order of my child divs in the parent div, every 2 seconds with no interactions (rotate by its self if page is loaded:
First child needs to move to third child, second child needs to move to the first child and the third child needs to move to the second child
The second and third child should always have the class "small" and when it reach the first child position it should be removed.
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');
How can I do this?
You can do it like this :
Order of first change will be : 2 3 1
Order of second change will be : 3 1 2
And then order will return to its initial point : 1 2 3
Thanks to validate and upvote my answer if it do what you expect.
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>