Karussell mit thumbnails mit bootstrap v4

Sah ich eine demo von Karussell mit thumbnails mit bootstrap 3 hier.

Bin ich versucht zu implementieren, das gleiche für bootstrap v4, konnte aber nicht herausfinden, wie man fix einige UI-nitty gritty wie Links/rechts Schatten kommt über die gesamte Höhe inklusive thumbnails als gut. Hier ist die Geige mit v4.

Folgenden HTML-code:

<div id='carousel-custom' class='carousel slide' data-ride='carousel'>
        <!-- Wrapper for slides -->
        <div class='carousel-inner'>
            <div class='carousel-item active'>
                <img src='http://placehold.it/400x200&text=slide1' alt='' />
            </div>
            <div class='carousel-item'>
                <img src='http://placehold.it/400x200&text=slide2' alt='' />
            </div>
            <div class='carousel-item'>
                <img src='http://placehold.it/400x200&text=slide3' alt='' />
            </div>
        </div>

        <!-- Controls -->
        <a class='left carousel-control' href='#carousel-custom' data-slide='prev'>
            <span class='glyphicon glyphicon-chevron-left'></span>
        </a>
        <a class='right carousel-control' href='#carousel-custom' data-slide='next'>
            <span class='glyphicon glyphicon-chevron-right'></span>
        </a>


    <!-- Indicators -->
    <ol class='carousel-indicators'>
        <li data-target='#carousel-custom' data-slide-to='0' class='active'><img src='http://placehold.it/100x50&text=slide1' alt='' /></li>
        <li data-target='#carousel-custom' data-slide-to='1'><img src='http://placehold.it/100x50&text=slide2' alt='' /></li>
        <li data-target='#carousel-custom' data-slide-to='2'><img src='http://placehold.it/100x50&text=slide3' alt='' /></li>

    </ol>
</div>

CSS-Änderungen:

#carousel-example-generic {
    margin: 20px auto;
    width: 400px;
}

#carousel-custom {
    margin: 20px auto;
    width: 400px;
}
#carousel-custom .carousel-indicators {
    margin: 10px 0 0;
    overflow: auto;
    position: static;
    text-align: left;
    white-space: nowrap;
    width: 100%;
}
#carousel-custom .carousel-indicators li {
    background-color: transparent;
    -webkit-border-radius: 0;
    border-radius: 0;
    display: inline-block;
    height: auto;
    margin: 0 !important;
    width: auto;
}
#carousel-custom .carousel-indicators li img {
    display: block;
    opacity: 0.5;
}
#carousel-custom .carousel-indicators li.active img {
    opacity: 1;
}
#carousel-custom .carousel-indicators li:hover img {
    opacity: 0.75;
}

Sie könnten auch legen Sie die ol Indikatoren-Liste außerhalb der .carousel div für custom-styling. Es wird immer noch funktionieren

InformationsquelleAutor Saurabh | 2017-01-09

Für die Bootstrap-4 kann es einfacher sein zu verwenden list-inline für Sie den Schieberegler, thumbnails, und Sie müssen nicht so viel extra CSS.

    <div class="col-lg-6 offset-lg-3" id="slider">
            <div id="myCarousel" class="carousel slide">
                <div class="carousel-inner">
                    <div class="active item carousel-item" data-slide-number="0">
                        <img src="http://placehold.it/1200x480&amp;text=one" class="img-fluid">
                    </div>
                    <div class="item carousel-item" data-slide-number="1">
                        <img src="http://placehold.it/1200x480/888/FFF" class="img-fluid">
                    </div>
                    <div class="item carousel-item" data-slide-number="2">
                        <img src="http://placehold.it/1200x480&amp;text=three" class="img-fluid">
                    </div>
                    <div class="item carousel-item" data-slide-number="3">
                        <img src="http://placehold.it/1200x480&amp;text=four" class="img-fluid">
                    </div>
                    <div class="item carousel-item" data-slide-number="4">
                        <img src="http://placehold.it/1200x480&amp;text=five" class="img-fluid">
                    </div>
                    <div class="item carousel-item" data-slide-number="5">
                        <img src="http://placehold.it/1200x480&amp;text=six" class="img-fluid">
                    </div>
                    <div class="item carousel-item" data-slide-number="6">
                        <img src="http://placehold.it/1200x480&amp;text=seven" class="img-fluid">
                    </div>
                    <div class="item carousel-item" data-slide-number="7">
                        <img src="http://placehold.it/1200x480&amp;text=eight" class="img-fluid">
                    </div>

                    <a class="carousel-control left pt-3" href="#myCarousel" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
                    <a class="carousel-control right pt-3" href="#myCarousel" data-slide="next"><i class="fa fa-chevron-right"></i></a>

                </div>


                <ul class="carousel-indicators list-inline">
                    <li class="list-inline-item active">
                        <a id="carousel-selector-0" class="selected" data-slide-to="0" data-target="#myCarousel">
                            <img src="http://placehold.it/80x60&amp;text=one" class="img-fluid">
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a id="carousel-selector-1" data-slide-to="1" data-target="#myCarousel">
                            <img src="http://placehold.it/80x60&amp;text=two" class="img-fluid">
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a id="carousel-selector-2" data-slide-to="2" data-target="#myCarousel">
                            <img src="http://placehold.it/80x60&amp;text=three" class="img-fluid">
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a id="carousel-selector-3" data-slide-to="3" data-target="#myCarousel">
                            <img src="http://placehold.it/80x60&amp;text=four" class="img-fluid">
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a id="carousel-selector-4" data-slide-to="4" data-target="#myCarousel">
                            <img src="http://placehold.it/80x60&amp;text=five" class="img-fluid">
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a id="carousel-selector-5" data-slide-to="5" data-target="#myCarousel">
                            <img src="http://placehold.it/80x60&amp;text=six" class="img-fluid">
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a id="carousel-selector-6" data-slide-to="6" data-target="#myCarousel">
                            <img src="http://placehold.it/80x60&amp;text=seven" class="img-fluid">
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a id="carousel-selector-7" data-slide-to="7" data-target="#myCarousel">
                            <img src="http://placehold.it/80x60&amp;text=eight" class="img-fluid">
                        </a>
                    </li>
                </ul>
        </div>
    </div>

http://www.codeply.com/go/tBbcVXe1xZ

InformationsquelleAutor Zim

Bewegen Sie die Steuerelemente in der .carousel-inner element, es wird nicht gestreckt nach unten durch die Miniaturbilder:

<div class='carousel-inner'>
    <div class='carousel-item active'>
        <img src='http://placehold.it/400x200&text=slide1' alt='' />
    </div>
    <div class='carousel-item'>
        <img src='http://placehold.it/400x200&text=slide2' alt='' />
    </div>
    <div class='carousel-item'>
        <img src='http://placehold.it/400x200&text=slide3' alt='' />
    </div>

    <div class='carousel-item'>
        <img src='http://placehold.it/400x200&text=slide4' alt='' />
    </div>
    <div class='carousel-item'>
        <img src='http://placehold.it/400x200&text=slide5' alt='' />
    </div>
    <div class='carousel-item'>
        <img src='http://placehold.it/400x200&text=slide6' alt='' />
    </div>

    <div class='carousel-item'>
        <img src='http://placehold.it/400x200&text=slide7' alt='' />
    </div>
    <div class='carousel-item'>
        <img src='http://placehold.it/400x200&text=slide8' alt='' />
    </div>
    <div class='carousel-item'>
        <img src='http://placehold.it/400x200&text=slide9' alt='' />
    </div>

    <!-- Controls -->
    <a class='left carousel-control' href='#carousel-custom' data-slide='prev'>
      <span class='glyphicon glyphicon-chevron-left'></span>
    </a>
    <a class='right carousel-control' href='#carousel-custom' data-slide='next'>
      <span class='glyphicon glyphicon-chevron-right'></span>
    </a>

</div>