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

Schreibe einen Kommentar