How to stack multiple images in Bootstrap 4 carous

问题:

I don't know what to do with Bootstrap 4, and how to show multiple small images –like thumbnails– in one slide, as opposed to have the images fill the width of the carousel. I've tried a couple things with the code below, but still can't stack many images.

<div class="container">
    <h2 class="text-center">- Carousel -</h2><br>

    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="http://via.placeholder.com/250x250" alt="First slide">
            </div>
            <div class="carousel-item">
                <img src="http://via.placeholder.com/250x250" alt="Second slide">
            </div>
            <div class="carousel-item">
                <img src="http://via.placeholder.com/250x250" alt="Third slide">
            </div>
            <div class="carousel-item">
                <img src="http://via.placeholder.com/250x250" alt="Fourth slide">
            </div>
            <div class="carousel-item">
                <img src="http://via.placeholder.com/250x250" alt="Fifth slide">
            </div>
            <div class="carousel-item">
                <img src="http://via.placeholder.com/250x250" alt="Sixth slide">
            </div>
        </div>

        <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

If you want to see an example, you can visit https://www.rhtacademy.com/ and look at the Highlights section.

回答1:

You can use the standard Bootstrap Grid system classes within the carousel slides too. So you can achieve the behavior seen in your example with the markup in the example below.
The example shows five images in one slide, and once the carousel slides to the next item, it will show the next block of five images.

<div id="gallery" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <div class="row">
                <div class="col">
                    <img class="img-fluid" src="http://via.placeholder.com/800x450/caa8f5/ffffff?text=Image+1" alt="Image 1"/>
                </div>

                <div class="col">
                    <img class="img-fluid" src="http://via.placeholder.com/800x450/9984d4/ffffff?text=Image+2" alt="Image 2"/>
                </div>

                <div class="col">
                    <img class="img-fluid" src="http://via.placeholder.com/800x450/592e83/ffffff?text=Image+3" alt="Image 3"/>
                </div>

                <div class="col">
                    <img class="img-fluid" src="http://via.placeholder.com/800x450/230c33/ffffff?text=Image+4" alt="Image 4"/>
                </div>

                <div class="col">
                    <img class="img-fluid" src="http://via.placeholder.com/800x450/b27c66/ffffff?text=Image+5" alt="Image 5"/>
                </div>
            </div>
        </div>

        <div class="carousel-item">
            <div class="row">
                <div class="col">
                    <img class="img-fluid" src="http://via.placeholder.com/800x450/f35b04/ffffff?text=Image+6" alt="Image 6"/>
                </div>

                <div class="col">
                    <img class="img-fluid" src="http://via.placeholder.com/800x450/f18701/ffffff?text=Image+7" alt="Image 7"/>
                </div>

                <div class="col">
                    <img class="img-fluid" src="http://via.placeholder.com/800x450/f7b801/ffffff?text=Image+8" alt="Image 8"/>
                </div>

                <div class="col">
                    <img class="img-fluid" src="http://via.placeholder.com/800x450/7678ed/ffffff?text=Image+9" alt="Image 9"/>
                </div>

                <div class="col">
                    <img class="img-fluid" src="http://via.placeholder.com/800x450/3d348b/ffffff?text=Image+10" alt="Image 10"/>
                </div>
            </div>
        </div>
    </div>

    <a class="carousel-control-prev" href="#gallery" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>

    <a class="carousel-control-next" href="#gallery" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

回答2:

Try to trigger click event on next button. Something like this :

var timer = setInterval(function(){
    $('#nextButton').trigger('click');
 },2000)

Do not forget to reset the timer when previous button is clicked. Otherwise you might feel some glitches.