同一页面或同一网站需要多个 bootstrap 轮播，但它们的尺寸必须不同

Question

使用Bootstrap。例如 1 是 h380 x w600，另一个是 h285 x w450m 等等。我是新手，需要实际的 HTML、JS 和 CSS。

我研究过并且只找到了放置多个相同尺寸轮播的解决方案。

Answer 1

<div class="row carousel">
  <div id="firstCarousel" class="carousel slide" data-interval="false" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
      <div class="carousel-item item active">
        <div class="carousel-item-content">
        </div>
      </div>
      <div class="carousel-item item second-item">
      <div class="carousel-item-content">
        </div>
      </div>
    </div>

    <a class="carousel-control left" href="#firstCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control right" href="#firstCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
<div class="row carousel">
  <div id="secondCarousel" class="carousel slide" data-interval="false" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
      <div class="carousel-item item active">
        <div class="carousel-item-content">
        </div>
      </div>
      <div class="carousel-item item second-item">
      <div class="carousel-item-content">
        </div>
      </div>
    </div>

    <a class="carousel-control left" href="#secondCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control right" href="#secondCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

在 JS 中：

$(document).ready(function() {
  $('#firstCarousel').carousel();
  $('#secondCarousel').carousel();
});

在 CSS 中，您可以使用其 id

更改轮播的高度和宽度

#firstCarousel{
  width: 600px;
  height: 380px;
}
#secondCarousel{
  width: 450px;
  height: 285px;
}

Answer 2

以下是不同尺寸的轮播：CodePen Demo 或运行下面的代码段。

.row {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

h1,
h3 {
  text-align: center;
  font-family: Verdana, sans-serif;
}

.row {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

h1,
h3 {
  text-align: center;
}

@media (min-width: 638px) {
  h1 {
    display: none;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row" id="row1">
    <h1>400x400</h1>
    <div class="bd-example">
      <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleCaptions" data-slide-to="1" class=""></li>
          <li data-target="#carouselExampleCaptions" data-slide-to="2" class=""></li>
        </ol>
        <div class="carousel-inner" role="listbox">
          <div class="carousel-item active">
            <img class="d-block img-fluid" src="https://placebear.com/400/400" alt="400x400" />
            <div class="carousel-caption d-none d-md-block">
              <h3>400x400</h3>
            </div>
          </div>
          <div class="carousel-item">
            <img class="d-block img-fluid" src="http://www.fillmurray.com/g/400/400" alt="400x400" />
            <div class="carousel-caption d-none d-md-block">
              <h3>400x400</h3>
            </div>
          </div>
          <div class="carousel-item">
            <img class="d-block img-fluid" src="https://placekitten.com/g/400/400" alt="400x400" />
            <div class="carousel-caption d-none d-md-block">
              <h3>400x400</h3>
            </div>
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
  </div>
  <div class="row" id="row2">
    <div class="bd-example">
      <h1>600x600</h1>
      <div id="carouselExampleCaptions2" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleCaptions2" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleCaptions2" data-slide-to="1" class=""></li>
          <li data-target="#carouselExampleCaptions2" data-slide-to="2" class=""></li>
        </ol>
        <div class="carousel-inner" role="listbox">
          <div class="carousel-item active">
            <img class="d-block img-fluid" src="https://placebear.com/600/600" alt="600x600" />
            <div class="carousel-caption d-none d-md-block">
              <h3>600x600</h3>
            </div>
          </div>
          <div class="carousel-item">
            <img class="d-block img-fluid" src="http://www.fillmurray.com/g/600/600" alt="600x600" />
            <div class="carousel-caption d-none d-md-block">
              <h3>600x600</h3>
            </div>
          </div>
          <div class="carousel-item">
            <img class="d-block img-fluid" src="https://placekitten.com/g/600/600" alt="600x600" />
            <div class="carousel-caption d-none d-md-block">
              <h3>600x600</h3>
            </div>
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleCaptions2" 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="#carouselExampleCaptions2" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
  </div>
  <div class="row" id="row3">
    <h1>250x250</h1>
    <div class="bd-example">
      <div id="carouselExampleCaptions3" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleCaptions3" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleCaptions3" data-slide-to="1" class=""></li>
          <li data-target="#carouselExampleCaptions3" data-slide-to="2" class=""></li>
        </ol>
        <div class="carousel-inner" role="listbox">
          <div class="carousel-item active">
            <img class="d-block img-fluid" src="https://placebear.com/250/250" alt="250x250" />
            <div class="carousel-caption d-none d-md-block">
              <h3>250x250</h3>
            </div>
          </div>
          <div class="carousel-item">
            <img class="d-block img-fluid" src="http://www.fillmurray.com/g/250/250" alt="250x250" />
            <div class="carousel-caption d-none d-md-block">
              <h3>250x250</h3>
            </div>
          </div>
          <div class="carousel-item">
            <img class="d-block img-fluid" src="https://placekitten.com/g/250/250" alt="250x250" />
            <div class="carousel-caption d-none d-md-block">
              <h3>250x250</h3>
            </div>
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleCaptions3" 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="#carouselExampleCaptions3" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
  </div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//rawgit.com/rosskevin/popper.js/feature-allow-text-html-node/src/popper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

更新

要使其在 Bootstrap 3 中自动播放，请更新 html 底部的 JQuery 代码，使其看起来像这样。

<script type="text/javascript">
$(document).ready(function() {
  $('#firstCarousel').carousel({interval: 2000});
  $('#secondCarousel').carousel({interval: 2000});
});
</script>

注：2000代表2000毫秒（2秒）。您可以通过为每个传送带分配不同的数字来更改每个传送带的速度。

同一页面或同一网站需要多个 bootstrap 轮播，但它们的尺寸必须不同

Need multiple bootstrap carousels on same page or same site, but they need to be different dimensions

height

width

carousel

twitter-bootstrap