Flex Carousel可调节尺寸

时间:2018-03-02 04:49:35

标签: html css web flexbox

我试图制作一个像我的其他flex元素一样调整大小的旋转木马,所以无论浏览器窗口的大小如何,我的网站格式都是一样的。但是我试过把旋转木马包裹在灵活的div中。谷歌搜索一个潜在的解决方案,但我还没有找到任何东西。这是我的代码,它只是旋转木马代码。我遇到的另一个问题是,当旋转木马调整尺寸时,旋转木马内的元素(例如图片侧面的下一个/上一个按钮或底部的指示器)将无法调整尺寸和/或位置。但完全不合适。

<div id="carouselExampleIndicators" class="carousel slide" data-interval="false">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block" src="pic1.jpg" alt="Missing Picture 1">
    </div>
    <div class="carousel-item">
      <img class="d-block" src="pic2.jpg" alt="Missing Picture 2">
    </div>
    <div class="carousel-item">
      <img class="d-block" src="pic3.jpg" alt="Missing Picture 3">
    </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>

0 个答案:

没有答案