twitter bootstrap personnalisé carrousel indicateurs
Je veux changer le carrousel des indicateurs avec quelque chose comme ceci:
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
Vous devez vous connecter pour publier un commentaire.
Vous pouvez utiliser media query -
Utiliser les mêmes images, juste redimensionné avec CSS comme ci-dessus. Il pourrait y avoir d'autres options, mais les requêtes de média est ce que je vous suggère.
C'est correct, mais de cette manière je dois encore vérifier pour chaque résolution et de voir quelle est la taille de l'image que je devrais utiliser dans cette résolution. Merci pour vos suggestions!
OriginalL'auteur Kevin Lynch
Il s'écroule à cause de la largeur de votre carrousel-indicateur est 320px. Vous ne pouvez pas avoir fixé avec si vous aussi vous souhaitez que votre code pour être réactif sur mobile. Vous pouvez remplacer le pourcentage plutôt que d'utiliser une largeur fixe
Notez que j'ai utilisé max-height et max-height pour que je puisse garder la proportion de l'image de sorte qu'il ne soit pas étendu dans les deux sens.
OriginalL'auteur