twitter bootstrap custom carousel indicators
23,053
You could use media query -
@media screen and (max-width:480px) {
.carousel-indicators li{
background: url(images/triangle.png) no-repeat;
background-size:120px 60px;
width:120px;
height:60px;
cursor: pointer;
text-align:center;
}
Author by
agis
Updated on July 31, 2022Comments
-
agis almost 2 years
I want to change the carousel indicators with something like this:
I have this markup for my carousel indicators:
<ol class="carousel-indicators"> <li data-target="#ShowCarousel-03" data-slide-to="0" class="active"> <h4>IMAGE1</h4><br/><h5>subtitle</h5><br/><span>+</span> </li> <li data-target="#ShowCarousel-03" data-slide-to="0" class="active"> <h4>IMAGE2</h4><br/><h5>subtitle</h5><br/><span>+</span> </li> <li data-target="#ShowCarousel-03" data-slide-to="2"> <h4>IMAGE3</h4><br/><h5>subtitle</h5><br/><span>+</span> </li> <li data-target="#ShowCarousel-03" data-slide-to="0" class="active"> <h4>IMAGE4</h4><br/><h5>subtitle</h5><br/><span>+</span> </li> </ol>
CSS:
.carousel-indicators { position: absolute; top: 0px; left: 0px; z-index: 5; margin: 0; list-style: none; } .carousel-indicators li{ background: url(images/triangle.png) no-repeat; width:320px; height:176px; cursor: pointer; text-align:center; }
When I resize my browser the carousel adapts to the width of the screen but the indicators are collapsing.
Can someone help me with a tip on how can I make this scale also on lower resolutions like the carousel images does?
Thank you!
L.E:
I've tried to put li elements like this:
<div class="row-fluid"> <div class="span3> <li data-target="#ShowCarousel-03" data-slide-to="0" class="active"> <h4>IMAGE1</h4><br/><h5>subtitle</h5><br/><span>+</span> </li> <div class="span3> <li data-target="#ShowCarousel-03" data-slide-to="0" class="active"> <h4>IMAGE1</h4><br/><h5>subtitle</h5><br/><span>+</span> </li> <div class="span3> <li data-target="#ShowCarousel-03" data-slide-to="0" class="active"> <h4>IMAGE1</h4><br/><h5>subtitle</h5><br/><span>+</span> </li> </div> </div>
But it's not working.