Question

我试图将3张图像作为Bootstrap 3 jumbotron的背景循环播放。但问题是我在jumbotron中有3个div并且到目前为止我尝试的所有解决方案都要求我将jumbotron的位置改为相对和背景图像为绝对。而且因为我试图保持网站的响应能力，所以这样做会严重影响小规模的外观。

我还尝试通过使jumbotron绝对和旋转木马相对而将旋转木马放在旋转木马上。在较小的屏幕尺寸下再次出现相同的缩放问题。

有一种简单的方法吗？

编辑：我希望我的背景更改类似于此网站：http://www.in-toronto-web-design.ca/并且也可以正确缩放。

我的代码：

 <!--begin jumbotron-top-->
<div class="jumbotron" id="jumbotron-top">
    <!--navigation bar-->
    <div class="row">
        <nav class="navbar navbar-default transparent" id="navbar-main">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navCollapse">
                <span class="sr-only">Toggle Navigation</span>
                <span class="fa fa-chevron-down fa-2x"></span> <b>Menu</b>
                </button>
            </div>

            <div class="collapse navbar-collapse" id="navCollapse">
                <ul class="nav nav-stacked main-nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Projects</a></li>
                    <li><a href="#">Company</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
                <hr>
            </div>
        </nav>
    </div>
    <!--end nav bar-->

    <h1>Heading</h1>
    <div class="container">
        <p>Content</p>
        <a class="btn btn-lg btn-success fp-buttons" href="#">
            <span class="fa fa-dollar fa-2x"></span>Button1
        </a>

        <a class="btn btn-lg btn-success fp-buttons" href="#">
            <span class="fa fa-check fa-2x"></span>Button2
        </a>
    </div>
</div>
<!--end jumbotron-top-->

Answer 1

我建议只使用内置的旋转木马并修改它以按照您想要的方式运行，而不是重新创建基本上是旋转木马的东西。

我将如何做到这一点：

Bootply Demo

HTML：

<body>
<!--navigation bar-->
<nav class="navbar navbar-default transparent navbar-static-top" role="navigation" id="navbar-main">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navCollapse">
                <span class="sr-only">Toggle Navigation</span>
                <span class="fa fa-chevron-down"></span> <b>Menu</b>
            </button>
            <a class="navbar-brand" href="#">Your Brand</a>
        </div>
        <div class="collapse navbar-collapse" id="navCollapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">Company</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>
<!--end nav bar-->
<!--begin bg-carousel-->
<div id="bg-fade-carousel" class="carousel slide carousel-fade" data-ride="carousel">
<!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active">
            <div class="slide1"></div>
        </div>
        <div class="item">
            <div class="slide2"></div>
        </div>
        <div class="item">
            <div class="slide3"></div>
        </div>
    </div><!-- .carousel-inner --> 
    <div class="container carousel-overlay text-center">
        <h1>Get Kittens Free All Week Long</h1>
        <p class="lead">Special orders also available upon request.  Check out our pricing.</p>
        <a class="btn btn-lg btn-success fp-buttons" href="#">
            <span class="fa fa-dollar"></span> Get Pricing
        </a>
        <a class="btn btn-lg btn-success fp-buttons" href="#">
            <span class="fa fa-check"></span> Sign Up
        </a>
    </div>
</div><!-- .carousel --> 
<!--end bg-carousel-->
<div class="container">
    <div class="row">
        <div class="col-xs-12">
           <p>Your other page content here...</p>
        </div><!--/.col -->
    </div><!--/.row -->
</div><!--/.container -->

 <!-- Core JavaScript -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>

CSS：

.navbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
.navbar-default.transparent {
    background-color: transparent;
}
.slide1, .slide2, .slide3 {
    min-height: 560px;
    background-size: cover;
    background-position: center center;
}
.slide1 {
    background-image: url(http://placekitten.com/1000/300);
}
.slide2 {
    background-image: url(http://placekitten.com/1100/300);
}
.slide3 {
    background-image: url(http://placekitten.com/1200/300);
}
/* Carousel Fade Effect */
.carousel.carousel-fade .item {
    -webkit-transition: opacity 1s linear;
    -moz-transition: opacity 1s linear;
    -ms-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
    transition: opacity 1s linear;
    opacity: .5;
}
.carousel.carousel-fade .active.item {
    opacity: 1;
}
.carousel.carousel-fade .active.left,
.carousel.carousel-fade .active.right {
    left: 0;
    z-index: 2;
    opacity: 0;
    filter: alpha(opacity=0);
}
.carousel-overlay {
    position: absolute;
    bottom: 100px;
    right: 0;
    left: 0;
}

你没有发布你的CSS，所以我不得不对你想要完成的事情做出一些假设。例如，而不是导航＆＃34;内部＆＃34;在jumbotron区域，我把它放在页面的顶部并给它一个绝对的位置，所以看起来好像导航器在旋转木马背景的顶部。

您可能还希望根据您的内容调整旋转木马覆盖定位，并通过设置.slide * x *类的最小高度来调整旋转木马本身的高度。我还会使用媒体查询来根据视口高度调整最小高度。

循环通过bootstrap 3 jumbotron的背景图像

1 个答案:

Bootply Demo