Skip to content Skip to sidebar Skip to footer

How To Get BS Carousel Indicators On Different Lines

Say I wanted to have 5 on one line and 5 on the other? Using:
messes up the indication order so that after it, the wrong indicator is lit up? But how else can you tell

Solution 1:

I finally figured it out, just manually applied this. (Key is top 20% and top top 27%.) (I set my indicator on top of my carousel).

  <ol class="carousel-indicators" style="top:20%;height:10px;">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
      <li data-target="#myCarousel" data-slide-to="4"></li>                                             
   </ol>
   <ol class="carousel-indicators" style="top:27%; height:10px;">
      <li data-target="#myCarousel" data-slide-to="5"></li>
      <li data-target="#myCarousel" data-slide-to="6"></li>
      <li data-target="#myCarousel" data-slide-to="7"></li>
      <li data-target="#myCarousel" data-slide-to="8"></li>
      <li data-target="#myCarousel" data-slide-to="9"></li> 
   </ol>

// This is other things, you can skip reading.

I set height because under my carousel has submit button and indicator default height is so long that margin hinder the clickable area.

1 Default indicator height: clickable area in red box.

2 After set height.

ps. sorry for my horrible gramma.


Post a Comment for "How To Get BS Carousel Indicators On Different Lines"