twitter bootstrap personnalisé carrousel indicateurs

Je veux changer le carrousel des indicateurs avec quelque chose comme ceci:

twitter bootstrap personnalisé carrousel indicateurs

J'ai cette balise pour mon carrousel indicateurs:

<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;
}

Quand je redimensionner mon navigateur, le carrousel s'adapte à la largeur de l'écran, mais les indicateurs sont en train de s'effondrer.

Quelqu'un peut m'aider avec une astuce sur comment puis-je faire de cette échelle également sur des résolutions inférieures comme le carousel d'images?

Merci!

L. E:

J'ai essayé de mettre li éléments comme ceci:

 <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>

Mais cela ne fonctionne pas.

OriginalL'auteur agis | 2013-04-05