How can I cycle a class on 3 elements

Question

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

enter image description here

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>

lucuma · Accepted Answer · 2012-05-29T15:05:01.017

2

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

edited May 29 '12 at 15:05

answered May 29 '12 at 14:23

lucuma

18,247
4
66
91

Doesn't quite work with this function, as I have 'bullet1', 'bullet2', 'bullet3'. That is that needs to be .removeClass and .addClass on. – SMacFadyen May 29 '12 at 14:41
Can you mock up a jsfiddle with the code. I'm not quite understanding the question especially when you say "cycle the class .active" – lucuma May 29 '12 at 14:44
It's pretty much the External Controls demo at http://www.gmarwaha.com/jquery/jcarousellite/#demo but using a div with a background image instead of a – SMacFadyen May 29 '12 at 14:49
I get that but where are you trying to add the active class? To the slides or something inside the slides? – lucuma May 29 '12 at 14:55
I've added the full HTML where you can see each bullet leading to each respective element – SMacFadyen May 29 '12 at 14:59
1

Thanks that helped me understand a little better. I've updated the answer. – lucuma May 29 '12 at 15:06
Perfect my friend, you are really talented. – SMacFadyen May 29 '12 at 15:09

score 0 · Answer 2 · answered May 29 '12 at 14:53

0

.toggleClass() might help you - http://api.jquery.com/toggleClass/

answered May 29 '12 at 14:53

Dave Haigh

4,369
5
34
56

How can I cycle a class on 3 elements

2 Answers2