Bootstrap Carousel not displaying indicators and list not working

Question

I'm using a bootstrap carousel ( * bootstrap-carousel.js v2.2.2). The problem is, the style of the 'ol' which contains the carousel-indicators isn't working. When I add the style manually to my css file it is displaying, but it doesn't seem to change when the .active class changes from slide to slide.

My code is:

<div id="HomeCarousel" class="carousel slide">

  <ol class="carousel-indicators">
    <li id="homecar1" data-target="#HomeCarousel" data-slide-to="0" class="active"></li>
    <li id="homecar2" data-target="#HomeCarousel" data-slide-to="1"></li>
    <li id="homecar3" data-target="#HomeCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item"><img src="<?php bloginfo('template_url'); ?>/images/home/home_carousel1.jpg" height="506px" /> </div>
    <div class="item"><img src="<?php bloginfo('template_url'); ?>/images/home/home_carousel2.jpg" /></div>
    <div class="item"><img src="<?php bloginfo('template_url'); ?>/images/home/home_carousel3.jpg" /></div>
  </div>

</div>

So it seems the jquery isn't working that well too.. but the slides work and the prev/next does too when I add it..

Can you provide a JSFiddle with some working code? Your markup looks fine, and so it's not possible to tell what's wrong without more samples from your code. — Ross Allen

Jeroen Balk Jeroen Balk · Accepted Answer · 2014-01-27T09:49:04

I really would like to add some JSFiddle but there isn't more to this than just the default bootstrap.js and stylesheet.. I added the indicators style from a downloaded bootstrap css 2.3 file and used the id to set the active indicator. I added the following js manually:

jQuery(document).ready(function($) {
          $( "#HomeCarousel li#ind-homecar0" ).click(function() {
            $( '#HomeCarousel' ).carousel(0);
            });
          $( "#HomeCarousel li#ind-homecar1" ).click(function() {
            $( '#HomeCarousel' ).carousel(1);
            });
          $( "#HomeCarousel li#ind-homecar2" ).click(function() {
            $( '#HomeCarousel' ).carousel(2);
            });

          $('#HomeCarousel.carousel').on('slid', function() {
            var to_slide = $('#HomeCarousel .carousel-inner .item.active').attr('id');
            $('#HomeCarousel .carousel-indicators').children().removeClass('active');
            $('#HomeCarousel .carousel-indicators [id=ind-' + to_slide + ']').addClass('active');
          });

          });

Bootstrap Carousel not displaying indicators and list not working

1 Answers