我的页面上有一个引导轮播，非常标准。 但是我想让幻灯片下面的部分随每张幻灯片而变化，但是我尝试的每个选项似乎都无法正常工作。 我也是一个主要的新手，所以这可能是问题的一部分。
我已尝试按照本节Bootstrap Carousel: Change section under slider的说明将div折叠到该部分中，但它并不能完全满足我的需求。 我的页面现在的状态问题是所有幻灯片的部分都相同，因为它只有一页... 可以在更换幻灯片时更改部分吗？
<header>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('https://images.pexels.com/photos/2053922/pexels-photo-2053922.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')">
<div class="slide__content">
<h2 class="slide__heading">First Slide</h2>
<p class="slide__text">This is a description for the first slide.</p>
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('https://source.unsplash.com/bF2vsubyHcQ/1920x1080')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">Second Slide</h2>
<p class="lead">This is a description for the second slide.</p>
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('https://source.unsplash.com/szFUQoyvrxM/1920x1080')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">Third Slide</h2>
<p class="lead">This is a description for the third slide.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
<!-- Page Content -->
<section class="py-5">
<div class="container">
<h1 class="display-4">Full Page Image Slider</h1>
<p class="lead">The background images for the slider are set directly in the HTML using inline CSS. The images in this snippet are from <a href="https://unsplash.com">Unsplash</a>, taken by <a href="https://unsplash.com/@joannakosinska">Joanna Kosinska</a>!</p>
</div>
</section>
此部分是我想在每张幻灯片上“移动”的部分，因此文本可能对于每张幻灯片都是唯一的。
答案 0 :(得分：0)
尝试删除轮播字幕类。并使用图片代替幻灯片的背景。运行下面的代码段
.item img {width: 100%; height: auto}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://images.pexels.com/photos/2053922/pexels-photo-2053922.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Slide 1">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt tortor vitae purus facilisis fringilla. Mauris egestas urna enim, vehicula placerat nibh mattis ut. Sed condimentum, metus ac ultricies varius, urna massa rhoncus leo, vel ultrices quam orci id est. Vestibulum nisl enim, dignissim vitae vehicula sed, egestas quis tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis faucibus volutpat arcu, eget molestie arcu malesuada quis. Duis sed nunc sit amet libero aliquam accumsan nec eu sapien.
<p>
</div>
</div>
<div class="item">
<img src="https://thehappypuppysite.com/wp-content/uploads/2017/06/marshmallows.jpg" alt="Slide 2">
<div>
<p>
Vestibulum ultricies eu neque at suscipit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer at dui vel lectus sagittis tincidunt eu quis urna. Proin dapibus nisl id ipsum lacinia, quis euismod dui aliquam. Nulla nisi neque, aliquam id dolor eu, porttitor vehicula ante. Curabitur odio nisl, dignissim ac sem ac, luctus cursus eros. Quisque ornare cursus eros eget posuere. Proin in malesuada dui, et ultrices eros. Curabitur dictum leo arcu, quis pellentesque orci pretium a. In leo odio, accumsan eget elit sit amet, luctus efficitur nulla. Vivamus porta pharetra dictum. Nullam consectetur neque ante, sed vestibulum augue efficitur lobortis. Donec at neque porttitor, dapibus lectus nec, condimentum ligula.
</p>
</div>
</div>
<div class="item">
<img src="https://thehappypuppysite.com/wp-content/uploads/2015/01/puppy-search-2.jpg" alt="Slide 3">
<div>
<p>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed fringilla volutpat ornare. Vivamus nunc justo, sollicitudin vitae hendrerit et, vestibulum nec justo. Praesent eu finibus purus. Maecenas vel eros malesuada mauris luctus consectetur. Nunc viverra porta diam, vel sagittis felis blandit ut. Sed elementum bibendum lectus, iaculis tempus ex suscipit et. Aliquam erat volutpat. Nullam eget magna sit amet metus blandit hendrerit in non elit. Quisque imperdiet sem nec laoreet rutrum. Pellentesque semper, odio eu iaculis euismod, orci orci maximus elit, eget suscipit nibh tellus a lacus. Praesent convallis est placerat nunc congue cursus eu eu risus. Etiam ante libero, tristique eu faucibus eget, posuere in erat. Maecenas elementum imperdiet tincidunt. Nulla ac ex quis quam ultricies volutpat sed quis sem.
</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>