Standard bootstrap carousel can contains dots to change slides (example on bootstrap page).
However, I recently read Why Users Aren't Clicking Your Home Page Carousel which proposed using captions instead of dots like below:
Is this option possible in bootstrap? If so, how can I do so?
You can doing this by just overriding the styles on the carousel-indicators list items.
###Here's a typical indicators section:
<!-- language: lang-html -->
<ul class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active">One</li>
<li data-target="#myCarousel" data-slide-to="1">Two</li>
<li data-target="#myCarousel" data-slide-to="2">Three</li>
</ul>
###You'll want to override some of the default Bootstrap styles:
Convert the display from dots to rectangles by adding a width and height and removing the border-radius:
Then get the text back by removing the negative text-indent added by Bootstrap:
Finally, add your own background and border and style however else you like.
The full styling should look like this:
.carousel-indicators > li,
.carousel-indicators > li.active{
width: 100px;
height: 25px;
border-radius: 0;
border: solid 1px grey;
background: lightgrey;
text-indent: 0;
}
.carousel-indicators > li.active {
background: white;
}
You could even wrap the entire bit of CSS inside of a media query so that when screen size became limited, you defaulted back to the dots instead of awkwardly stacking the list items:
<!-- language: lang-css -->@media screen and (min-width: 550px) {
/* Wrap CSS Here */
}