Bootstrap Carousel: Carousel-indicators Not Changing Size/class

I wanted the carousel-indicators below the images. This required some styling changes to still use Bootstrap for this carousel (see full code below). I added the border-color to th

Solution 1:

Here is a working example of a bootstrap carousel and the indicators work just fine. You are missing some quotes at the end of your iframe src and this may be causing some issues but you can find a working example at this fiddle http://jsfiddle.net/wamosjk/auotu240/ and here is the code

<divid="myCarousel"class="carousel slide"data-ride="carousel"data-interval="false"><!-- Indicators --><olclass="carousel-indicators"><lidata-target="#myCarousel"data-slide-to="0"class="active"></li><lidata-target="#myCarousel"data-slide-to="1"></li><lidata-target="#myCarousel"data-slide-to="2"></li></ol><!-- Wrapper for slides --><divclass="carousel-inner"role="listbox"><divclass="item active"><iframewidth="100%"height="250"src="https://www.youtube-nocookie.com/embed/xxx"></iframe></div><!-- End Item --><divclass="item"><iframewidth="100%"height="250"src="https://www.youtube-nocookie.com/embed/xxx"></iframe></div><!-- End Item --><divclass="item"><iframewidth="100%"height="250"src="https://www.youtube-nocookie.com/embed/xxx"></iframe></div><!-- End Item --></div><!-- End Carousel Inner --><!-- Controls --><aclass="left carousel-control"href="#myCarousel"data-slide="prev"><spanclass="glyphicon glyphicon-chevron-left"></span></a><aclass="right carousel-control"href="#myCarousel"data-slide="next"><spanclass="glyphicon glyphicon-chevron-right"></span></a></div><!-- End Carousel -->

you can take out the script and just put data-interval="false" in your carousel as well but it is up to you if you are still having issues then there is some more than likely some previously stated css or javascript issues. You may take out the controls if you dont want them and just keep the indicators.

I found that if you want the indicators outside of the carousel the active class no longer toggles so you would need to add the following script

<script>
$(".carousel-indicators li").on('click', function(){
    $(this).siblings().removeClass('active')
    $(this).addClass('active');
})
</script>