Geek Answers Handbook

Custom carousels

I want to change the carousel indicators like this:

custom carousel indicators

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 adjusts to the width of the screen, but the indicators crash.

Can someone help me with a hint on how I can make this scale also at lower resolutions, for example, on carousel images?

Thanks!

LE:

I tried putting the li elements as follows:

  <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 does not work.

+4
source share
2 answers

You can use a 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; }
+1
source

It crashes because the width of your carousel indicator is 320 pixels. You cannot fix it if you also want your code to respond to mobile devices. You can replace a percentage rather than a fixed width

 .carousel-indicators li{ background: url(images/triangle.png) no-repeat; max-width:25%; max-height:15%; /*or any other percentage that would look good*/ cursor: pointer; text-align:center; }

Please note that I used maximum height and maximum height to keep the image proportions so that it does not stretch in any direction.

+2
source

More articles:


All Articles