switching active div class in loop jquery -
i have part of code
<div class="container"> <div class="item active">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> </div>
and need switch active class next element after delay , loop switching last element first. how can ?
you need use setinterval() method. loop items use addition modulus of items quantity. run snippet below see result.
var navs = $(".container > .item"); setinterval(function(){ var cur = $(".container > .active").index(); var nxt = (cur + 1) % navs.length; navs.eq(cur).removeclass("active"); navs.eq(nxt).addclass("active"); }, 1000);
.item { display: inline-block; height: 100px; width: 100px; background-color: green; } .active { background-color: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="item active">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> </div>
Comments
Post a Comment