javascript - 如何更改轮播下带有文本的部分

Question

我的页面中有一个 Bootstrap 轮播，非常标准。 但我希望幻灯片下的部分随每张幻灯片而变化，但我尝试的每个选项似乎都无法正常工作。 我也是一个主要的新手，所以这可能是问题的一部分。

我已经尝试折叠该部分内的 div，如此处所述 Bootstrap Carousel: Change section under slider但它不太适合我想要的。 我的页面现在的问题是所有幻灯片的部分都是相同的，因为它只有一页...... 是否可以在更改幻灯片时更改部分？

<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>

该部分是我想在每张幻灯片中“移动”的部分，因此每张幻灯片的文本都可以是唯一的。

Answer 1

尝试删除轮播字幕类。并使用图像而不是使幻灯片的背景成为图像。运行下面的代码片段

.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>