Automatic Carousel with Dom manipulation

Question

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

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?

user_401278 · Answer

You can do it like this :

Remove small class for all slides with removeClass()
Set different var with each slides positions
Set slides container empty with empty()
Append slides in right order with append()
And then add all of this inside a setInterval() called every 2 seconds.

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


 
  
   
       First
   
   
       Second
   
   
       Third

Automatic Carousel with Dom manipulation

1 Answers