Bootstrap 3 carousel: replace indicators with text
I'm trying to replace the indicators on the loading carousel with text, almost like navigation, but couldn't figure out how to do this even after hours of searching. I found many css options for customizing indicators, but no method to completely replace them. The text will be the identifying title for the carousel "slide". Naturally the code
<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>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
</ol>
I would like to say that I tried a lot, but everything was done in the dark and I knew there was a wrong direction from the start. I am very grateful for your help with this.
+3
source to share
1 answer
This is how I did it:
Html
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active">text1</li>
<li data-target="#carousel" data-slide-to="1">text2</li>
<li data-target="#carousel" data-slide-to="2">text3</li>
</ol>
CSS
.carousel-indicators li{
text-indent:0;
width:200px;
height: 40px;
border:none;
background-color: transparent;
}
+3
source to share