引导 4 - 具有固定背景的轮播

Question

我想创建一个具有固定背景的轮播。只有文本应该改变。

我试图在每张幻灯片中放置相同的背景图像，但我不喜欢切换动画。我认为如果只改变案文会更好。

我的代码：

<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="first-slide" src="img/earth1.jpg" alt="First slide">
<div class="container">
<div class="carousel-caption text-left">
<h1>TEXT 1</h1>
<p id="screen"></p>
<p>text1</p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="second-slide" src="img/earth1.jpg" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>TEXT 2</h1>
<p id="screen"></p>
<p>text2</p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="third-slide" src="img/earth1.jpg" alt="Third slide">
<div class="container">
<div class="carousel-caption text-right">
<h1>TEXT 3</h1>
<p id="screen"></p>
<p>text3</p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

我需要添加什么？

谢谢 杰

Answer 1

您应该尝试一下：在轮播项目上方添加新的div，如下所示，并根据需要设置背景图像，您可以在每张幻灯片上获得相同的图像，只需在轮播项中设置内容样式即可。 您还可以将最小高度设置为背景图像，如下面的代码所示。

<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="img" style="background-image: url('your image path');">
<div class="carousel-item active">
<img class="first-slide" src="img/earth1.jpg" alt="First slide">
<div class="container">
<div class="carousel-caption text-left">
<h1>TEXT 1</h1>
<p id="screen"></p>
<p>text1</p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="second-slide" src="img/earth1.jpg" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>TEXT 2</h1>
<p id="screen"></p>
<p>text2</p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="third-slide" src="img/earth1.jpg" alt="Third slide">
<div class="container">
<div class="carousel-caption text-right">
<h1>TEXT 3</h1>
<p id="screen"></p>
<p>text3</p>
</div>
</div>
</div>
</div>    
</div>
<a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<style type="text/css">
.img{
background-repeat: no-repeat;
background-size: cover;
background-position: center;
min-height:400px;
}
</style>