I'm using jCarouselLite to cycle between 3 elements. I've setup the plugin to do this fine, including 3x .bulletX
which slides to each element, i.e. bullet 1 slides to element 1, etc.
However what I want is to cycle the class .active
on the .bulletX
to designate which element is being shown, similar to nivoslider.
<div class="bullet1">If this is clicked, is leads to element1</div>
<div class="bullet2">If this is clicked, is leads to element2</div>
<div class="bullet3">If this is clicked, is leads to element3</div>
I feel like there is something I can do with .addClass
and .removeClass
, but can't quite get the semantics of a loop in my head.
.active
applied to .bullet2
manually
Edit Full HTML
<div class="twwetHolder">
<div class="tweet">
<ul>
<li>
<div>element 1</div>
</li>
<li>
<div>element 2</div>
</li>
<li>
<div>element 3</div>
</li>
</ul>
</div>
<div class="bullet1"></div>
<div class="bullet2"></div>
<div class="bullet3"></div>
</div>
Update:
I'd suggest you add a class to each bullet (another) and then use the btnGo event and a click event to add the class.
http://jsfiddle.net/lucuma/fg6d4/1/
<div class="bullet1 btngo">a</div>
<div class="bullet2 btngo">b</div>
<div class="bullet3 btngo">c</div>
$('.tweet').jCarouselLite({btnGo:$('.btngo')});
$('.btngo').click(function() {
$('.btngo').removeClass('active');
$(this).addClass('active');
});
ā
Original:
You could try these options:
beforeStart: function(a) {
$(a).removeClass('active');
},
afterEnd: function(a) {
$(a).addClass('active');
}