在同一页面或同一站点上需要多个引导轮播，但它们需要不同的尺寸答案

【问题标题】：Need multiple bootstrap carousels on same page or same site, but they need to be different dimensions在同一页面或同一站点上需要多个引导轮播，但它们需要不同的尺寸
【发布时间】：2018-01-25 06:12:51
【问题描述】：

使用引导程序。例如 1 是 h380 x w600，另一个是 h285 x w450m，依此类推。我是新手，需要实际的 HTML、JS 和 CSS。

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

【问题讨论】：

标签： twitter-bootstrap height width carousel

【解决方案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;
}

【讨论】：

谢谢！我会试试看。我确实想出了一个头脑风暴的解决方法——我为特定页面创建了一个新的 css 文件，只使用了轮播 css 并对其进行了修改。然后将该css文件包含在页面中。它有效，但是，我确信这不是处理此问题的“正确”方法。此外，它不会在同一页面上处理不同大小的轮播......会让您知道您的解决方法的结果！
这似乎不起作用。两个轮播大小相同，它们会在页面上上下跳动

【解决方案2】：

这里有不同大小的轮播：CodePen Demo或运行下面的sn-p。

.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 秒）。您可以通过为每个轮播分配不同的数字来更改每个轮播的速度。

【讨论】：

感谢您的努力，但是，我需要 2 个不同高度和宽度的旋转木马。如前所述，我是新手，不了解模态。对不起我的无知！
@Bazaboo 我明白了 - 对不起，我误解了。 - 我在上面更新了我的答案。希望它有所帮助。
好的！有 2 个轮播，大小不同，但不会自动播放。
这里是测试页面的链接：artandsoulgraphics.com/Clients/FostersNew/stackcarousel3.asp
哦，我明白了。我没有意识到您使用的是 Bootstrap 3。您可以在 <script> 标签中为您的 carousel 方法添加间隔。您可以将间隔设置为不同的毫秒数，以便为每个轮播分配自动播放速度。我在我的答案中发布了一个更新，您可以在 HTML 的底部使用它（只需将第 90 行的 <script> 标记替换为更新中的代码，它就会自动播放。