如何在Bootstrap 4轮播中堆叠多个图像 [英] How to stack multiple images in Bootstrap 4 carousel

问题描述

我不知道如何处理Bootstrap 4，以及如何在一张幻灯片中显示多个小图像(如缩略图)，而不是让图像填充旋转木马的宽度.我用下面的代码尝试了几件事，但是仍然不能堆叠很多图像.

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>

如果您想查看示例，可以访问 https://www.rhtacademy.com/，然后查看重点"部分.

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

推荐答案

您可以使用标准的Bootstrap 网格系统类也是如此.因此，您可以使用以下示例中的标记来实现示例中看到的行为. br> 该示例在一张幻灯片中显示了五张图像，并且轮播滑动到下一个项目时，它将显示下一张包含五张图像的块.

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>

这篇关于如何在Bootstrap 4轮播中堆叠多个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！