Wie positioniert Karussell Indikatoren in der Bootstrap-4
Ich versuche die Indikatoren unter dem Schieberegler, indem Sie .carousel-indicators
eine bottom: -50px;
aber die Indikatoren einfach zu verschwinden. Nun, ich vermute, das hat etwas zu tun mit der overflow:hidden
von dem regler, aber ich kann T es herausfinden.
Hier ist mein code:
<div id="slider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#slider" data-slide-to="0" class="active"></li>
<li data-target="#slider" data-slide-to="1"></li>
<li data-target="#slider" data-slide-to="2"></li>
<li data-target="#slider" data-slide-to="3"></li>
<li data-target="#slider" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="header.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="slider2.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="slider3.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="slider4.jpeg">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="slider5.jpeg">
</div>
</div>
</div>
- und CSS-hier:
#slider {
height: 350px;
overflow: hidden;
width: 100%;
}
.carousel-indicators li {
width: 10px;
height: 10px;
border-radius: 100%;
}
.carousel-indicators {
bottom: -50px;
}
InformationsquelleAutor Andrei Lazar | 2018-01-17
Du musst angemeldet sein, um einen Kommentar abzugeben.
Einstellung
bottom: -50px
auf.carousel-indicators
funktioniert, bewegen Sie den Indikatoren unten das Karussell, das Ergebnis ist jedoch nicht sichtbar, weil deroverflow: hidden
, als Sie vermutet richtig. Die Indikatoren sind einfach abgeschnitten, als Sie aus der bounding-box von Karussell.Anstelle die Höhe und die overflow-Eigenschaft des
#slider
selbst würde ich vorschlagen, zu beheben die Höhe über der.carousel-item
Klasse wie folgt:Dies nicht zu Interferenzen mit der Positionierung der Indikatoren.
Als ein Beispiel, ist verfügbar als Codepen.
InformationsquelleAutor dferenc
Um von unten in das element muss so positioniert werden relative, absolute oder fixed ist. Wenn es relativ positioniert, die bottom-Eigenschaft bewirkt, dass das element den unteren Rand zu verschieben oben/unten seine normale position.
Wenn es bereits richtig positioniert, bottom:-50px vielleicht verschieben Sie das element unten sichtbaren Bereich des übergeordneten Elements #slider.
Versuchen, Sie zu entfernen overflow: hidden; aus #regler und prüfen Sie, wo Karussell-Indikatoren positioniert werden.
InformationsquelleAutor August