Menu
What's an easy (and clean) way to move Bootstrap 3's carousel indicators down and outside of the slide container so it's not overlayed on the photos? See image below on where I want to move the indicators.
Link to live code
<div class="container"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://placehold.it/1170x300.jpg" alt="..."> </div> <div class="item"> <img src="http://placehold.it/1170x300.jpg" alt="..."> </div> <div class="item"> <img src="http://placehold.it/1170x300.jpg" alt="..."> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div><!--//container --> 
533
You just need to override two properties ( width and height ) and add a new one, border-radius , to . carousel-indicators li . Make width and height values equal eg: 10px each and give a border-radius of 100% .
In browsers where the Page Visibility API is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).
$('. carousel'). carousel({ interval: false, }); That will make the auto sliding stop because there no Milliseconds added and will never slider next.
You can push them below the slider like this...
.carousel-indicators { bottom:-50px; } Leave space below the carousel so that the pushed indicators don't interfere with content below the slider..
.carousel-inner { margin-bottom:50px; } you can simply add the bootstrap class hidden after the indicator class like this:
<ol class="carousel-indicators hidden"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
