CODEWITHSUNDEEP
javascriptjqueryhtml
Musa Muaz
Musa Muaz

Reputation: 714

Rotating a class in jquery

Hi i am doing some things with a slider.I need to rotate a class through three spaces.

<div class="slide slide_1">
   .....
</div>
<div class="slide slide_2 off">
   .....
</div>
<div class="slide slide_3 off">
   .....
</div>

Here are three slides.when it starts works i want to add a class live on slide_1 then after 1 sec i want to add live to slide_2 and remove off from slide_2 and also add off at slide_1.This way rotating live class on three slides.And when there is live there should be no off

Upvotes: 0

Views: 325

Answers (3)

Jonas Wilms
Jonas Wilms

Reputation: 138457

counter=0;   Sliders=document.getElementsByClassName("slide");
window.addInterval(function (){
sliders[counter].classList.remove("live");
sliders[counter].classList.add("off");
counter++;
if(counter==3){
counter=0;
}
sliders[counter].classList.remove("off");
sliders[counter].classList.remove("add");
},3000);

Same as Tjeshvis answer ( gave an upvote)

Upvotes: 0

Tejeshvi Roy
Tejeshvi Roy

Reputation: 146

Check JSFiddle I have created. 

var i = 2;
    window.setInterval(function(){
    $('.slide_'+i).removeClass('off').addClass('live').siblings().removeClass('live').addClass('off');
    i++;
    if(i==4){
    i=1;
    }
    },1000);

Upvotes: 1

Araknid
Araknid

Reputation: 476

You can write it like this:

var element = $('#id-of-element'); element.siblings().addClass('live').removeClass('off').siblings().removeClass('live').addClass('off');

Upvotes: 0

Related Questions