Note that there are some explanatory texts on larger screens.

plurals
  1. POBootstrap Carousel Pagination active state
    text
    copied!<p>I have scoured similar questions/answers here, but nothing seems to do the trick for me. My 'active' state is not working completely. It halfway works; it deactivates the first bullet when you select a different one.</p> <p><strong>Please check out the full code:</strong> <a href="http://jsfiddle.net/cindyg/e9Qum/" rel="nofollow noreferrer">http://jsfiddle.net/cindyg/e9Qum/</a></p> <p>The code below looks correct to me; not sure what's missing?</p> <pre><code>.bind('slid', function(e) { var nav = $('.carousel-nav[data-target="' + $(this).attr('id') + '"] button'); var index = $(this).find('.item.active').index(); var item = nav.find('a').get(index); nav.find('a.active').removeClass('active'); $(item).find('a').addClass('active'); </code></pre> <p>I attempted to use the suggested solutions here:</p> <ul> <li><a href="https://stackoverflow.com/questions/10499154/bootstrap-carousel-number-active-icon">Bootstrap Carousel Number active icon</a></li> <li><a href="https://stackoverflow.com/questions/10974724/bootstrap-carousel-pagination-slide-numbering-issue">Bootstrap carousel pagination / slide numbering issue</a></li> </ul> <p>...but they didn't work. Keep in mind I'm a newb and my syntax might have been way off when I tried them.</p> <p>Thanks all!</p> <p><strong>EDIT!!!!!!</strong> Somehow I fixed it... I really am not sure what I did, but I'm posting it here in case it helps anyone. However, now I'm having a problem where it's auto-rotating through the slides, even though I removed the "slide" class on the myCarousel div. Any ideas? <a href="http://jsfiddle.net/cindyg/UNKeL/" rel="nofollow noreferrer">on jsfiddle</a></p> <pre><code>.bind('slid', function(e) { var nav = $('.carousel-nav[data-target="' + $(this).attr('id') + '"] ul'); var index = $(this).find('.item.active').index(); var item = nav.find('li').get(index); nav.find('li a.active').removeClass('active'); $(item).find('a').addClass('active'); </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload