在Bootstrap 3 Jumbotron的背景图像中循环 [英] Cycle through background image of bootstrap 3 jumbotron
问题描述
我正在尝试获取3张图像作为Bootstrap 3巨型机的背景进行循环显示.但是问题是，我在超大范围内有3个div，到目前为止，我尝试过的所有解决方案都要求我将超大范围的位置更改为相对，将背景图像更改为绝对.而且由于我试图保持网站的响应速度，所以这样做会严重干扰较小比例的外观.
I'm trying to get 3 images to cycle through as backgrounds for a Bootstrap 3 jumbotron. But the problem is that I have 3 divs within the jumbotron and all the solution i've tried so far requires me to change the position of the jumbotron to relative and the background images to absolute. And because I'm trying to keep the site responsive, doing so severely messes up the look at smaller scales.
我还尝试通过使超大体绝对值和相对大体相对于转盘，将超大体放置在转盘上.较小的屏幕尺寸会再次出现相同的缩放问题.
I've also tried placing the jumbotron over a carousel by making the jumbotron absolute and carousel relative. The same scaling problem happens again at smaller screen sizes.
有一种简单的方法吗?
我希望我的背景与本网站类似: http://www. in-toronto-web-design.ca/并使其正确缩放.
I want my background to change similar to this site: http://www.in-toronto-web-design.ca/ and have it scale properly as well.
我的代码:
<!--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-->
推荐答案
我建议不要使用本质上是旋转木马的方式，而是建议使用内置旋转木马并对其进行修改以使其表现为所需的方式.
Rather than recreate what is essentially a carousel, I suggest just using the built in carousel and modifying it to behave the way you want.
这是我要这样做的方式:
Here's how I would do this:
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，因此我不得不对您要实现的目标做出一些假设.例如，我没有将导航放置"在巨无霸区域内，而是将其放置在页面的顶部，并对其进行了绝对定位，以便使其看起来好像导航仪位于轮播背景的顶部.
You didn't post your css, so I had to make some assumptions about what you were trying to accomplish. For example, instead of having the navigation "inside" the jumbotron area, I placed it at the top of the page and gave it an absolute positioning so it would appear as though the nav was on top of the carousel background.
您可能还想根据您的内容来调整轮播重叠式广告的位置，并通过设置.slide * x *类的最小高度来调整轮播本身的高度.我还将使用媒体查询根据视口高度调整最小高度.
You'll probably also want to tweak the carousel-overlay positioning based on your content, as well as adjust the height of the carousel itself, by setting the min-height of the .slide*x* classes. I would also use media queries to adapt the min-height based on the the viewport height.
这篇关于在Bootstrap 3 Jumbotron的背景图像中循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
