带有响应式图像的引导轮播答案

【问题标题】：Bootstrap Carousel with Responsive Images带有响应式图像的引导轮播
【发布时间】：2020-09-19 08:56:39
【问题描述】：

我无法在轮播幻灯片中包含响应式图片，目前轮播无法滑动到下一张或上一张。任何帮助表示赞赏，谢谢。


  <h2 class="caption-2"> UI Snippets</h2>
  <h2 class="description-2"> .</h2>

  <div id="ui-carousel" class="carousel slide" data-ride="false">

    <div class="carousel-inner" role="listbox" style="max-width:100%; max-height:630px !important;">

      <div class="carousel-item active container-fluid">
        <img class="design-1" src="UI-Designs/Day&Night.png" alt="Mock-Up">
      </div>
      <div class="carousel-item container-fluid">
        <div class="row">
          <div class="col-lg-4 col-md-6">
            <img class="design-2" src="UI-Designs/Hiking.jpg" alt="Mock-Up">
          </div>
          <div class="col-lg-4 col-md-6">
            <img class="design-2" src="UI-Designs/Homescreen.jpg" alt="Mock-Up">
          </div>
          <div class="col-lg-4 col-md-6">
            <img class="design-2" src="UI-Designs/Cycling.jpg" alt="Mock-Up">
          </div>
        </div>
      </div>

      <div class="carousel-item container-fluid">
        <video width=100% controls>
          <source src="Echo.mp4" type="video/mp4">
        </video>
      </div>
    </div>

    <a class="carousel-control-prev" href="#ui-carousel" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon"></span>
    </a>

    <a class="carousel-control-next" href="#ui-carousel" role="button" data-slide="next">
      <span class="carousel-control-next-icon"></span>
    </a>

  </div>
</div>```

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

<div class="container">
  <h2>Carousel Example</h2>  
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="la.jpg" alt="Los Angeles" style="width:100%;">
      </div>

      <div class="item">
        <img src="chicago.jpg" alt="Chicago" style="width:100%;">
      </div>

      <div class="item">
        <img src="ny.jpg" alt="New york" style="width:100%;">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

【讨论】：