Question

你好，伙计们，我把我的jumbotron和完整的背景图片放在里面。我在想，是否有可能不仅使一个静态图像，而且使一些幻灯片包含例如每5毫秒可以滑动的5张图片？可能吗？它怎么能实现我提到的呢？我目前的实施如下：

HTML：

 <div class="jumbotron">
            <div class="container">
            </div>
            </div>

和css for it：

.jumbotron {
    position: relative;
    background: #000 url('35.jpg') center center no-repeat;
    width: 100%;
    background-size: cover;
    overflow: hidden;
    height: 370px;
}

实施前一个后第二个galery滑块的问题：

<!-- Gallery -->
    <div class="container">
        <section>
            <div class="page-header" id="gallery">
                <h2>Kilka wykonanych projektów.<small> Couple of already realased projects.</small></h2>
            </div>

            <div class="carousel slide" id="screenshot-carousel" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#screenshot-carousel" data-slide-to="0" class="active"></li>
                    <li data-target="#screenshot-carousel" data-slide-to="1"></li>
                    <li data-target="#screenshot-carousel" data-slide-to="2"></li>
                    <li data-target="#screenshot-carousel" data-slide-to="3"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="highway.jpg" alt="Text of the image">
                        <div class="carousel-caption">
                            <h3>Highway heading</h3>
                            <p>This is the caption</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="river.jpg" alt="Text of the image">
                        <div class="carousel-caption">
                            <h3>River heading</h3>
                            <p>This is the caption</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="street.jpg" alt="Text of the image">
                        <div class="carousel-caption">
                            <h3>Street heading</h3>
                            <p>This is the caption</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="painting.jpg" alt="Text of the image">
                        <div class="carousel-caption">
                            <h3>Painting heading</h3>
                            <p>This is the caption</p>
                        </div>
                    </div>

                </div><!-- End Carousel inner -->
                <a href="#screenshot-carousel" class="left carousel-control" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a href="#screenshot-carousel" class="right carousel-control" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div><!-- End Carousel -->

        </section>
    </div>

这是图像变化后的样子：

enter image description here

Answer 1

有关如何在轮播中自定义jumbotron的演示，请参阅此bootply代码：http://www.bootply.com/61935

基本要点是将jumbotron放置在旋转木马容器的div内，所以你可以像旋转木马一样循环使用jumbotron。

Answer 2

对于带有jumbotron的轮播的参考，您可以查看my practice page！。如果你检查它，它有可读的代码。

整个滑块不是所有宽度你已将它放在容器div中。只需关闭容器div并在jumbotron内重新打开（这是可选的。你可以在没有容器的情况下使用它。或者用容器 - 液体代替容器来覆盖整个宽度）

Jumbotron图像滑块

2 个答案: