文章/答案/技术大牛

发布

社区首页 >问答首页 >Jumbotron图像滑块

问Jumbotron图像滑块
EN

Stack Overflow用户

提问于 2015-07-20 01:03:14

回答 2查看 11.4K关注 0票数 1

回族伙计们，我把我的巨型加速器和完整的背景图片放在里面了。我在想，是否有可能让它不只是一个静态图像，而是制作一些幻灯片，例如包含5张图片的幻灯片，可以每5秒滑动一次？有可能吗？它如何实现我提到的内容？我目前的实现如下：

html：

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

以及它的css：

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

在实现顶部的galery滑块后，第二个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>

这是图像发生变化后的外观：

twitter-bootstrap

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-07-20 01:13:45

有关如何在carousel中定制巨型加速器的演示，请参阅以下引导代码：http://www.bootply.com/61935

基本要点是将巨型加速器放在旋转木马容器的div中，这样您就拥有了巨型加速器的属性，就像在旋转木马中一样。

票数 2

Stack Overflow用户

发布于 2015-07-20 03:05:36

有关使用jumbotron的旋转木马的参考资料，可以查看my practice page！。如果你检查它，它有可读的代码。

整个滑块不是全宽的，你已经把它放到了一个容器里面。只需关闭容器div，然后在巨型加速器中重新打开它(这是可选的。你也可以在没有容器的情况下使用。或者用container-fluid代替container覆盖整个宽度)

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/31503690

复制

相似问题

问Jumbotron图像滑块
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jumbotron图像滑块EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jumbotron图像滑块
EN