同一页面上的多个 Twitter 的 Bootstrap 2.x 轮播，大小不同

Question

我想要一个“长而细”的轮播作为页眉，并在页面正文中使用一个“常规”尺寸的轮播。每个在 css 中都有不同的位置元素，例如细长的：

.carousel .item {
  height: 156px;
}
.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 156px;
}

传统的：

.carousel .item {
  height: 500px;
}
.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}

如果我尝试将 .carousel 更改为 .carousel2 一个实例，它不起作用（大概是创建轮播需要名称，所以更改它会破坏它！）

有没有办法 - 或者我需要实现一些其他的 jQuery 滑块？

Answer 1

为每个轮播使用唯一的 ID，而不是 .carousel 类。是。 id="myCarousel1"、id="myCarousel2" 等。另见：https://stackoverflow.com/a/10521804/1596547。

通过 javascript 开始您的狂欢，例如：

   $('#myCarousel1, #myCarousel2').carousel();

在 id 上应用你的 css 规则：

#myCarousel2 .item {
  height: 600px;
}
#myCarousel2 img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 600px;
}

另见：http://bootply.com/66023

Answer 2

感谢 Bass - 现在几乎可以享用了。

但是，有几件事发生了变化： 1）标题定位被忽略（heading1样式取自页面，不是轮播设置） 2) 轮播现在不会自动启动。

我正在将此页面包含到另一个页面中（上面已经有不同的轮播）。

有什么明显的地方我需要改变吗？

非常感谢

<style scoped>

/* Carousel base class */
.myCarousel2 .item {-webkit-transition: opacity 3s; -moz-transition: opacity 3s;  -ms-transition: opacity 3s; -o-transition: opacity 3s; transition: opacity 3s;}
.myCarousel2 .active.left {left:0;opacity:0;z-index:2;}
.myCarousel2 .next {left:0;opacity:1;z-index:1;}
#myCarousel2 {
  margin-bottom: 60px;
}

#myCarousel2 .container {
  position: relative;
  z-index: 9;
}

#myCarousel2-control {
  height: 80px;
  margin-top: 0;
  font-size: 120px;
  text-shadow: 0 1px 1px rgba(0,0,0,.4);
  background-color: transparent;
  border: 0;
  z-index: 10;
}

#myCarousel2 .item {
  height: 156px;
}
#myCarousel2 img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 156px;
}

#myCarousel2-caption {
  background-color: translucent;
  position: static;
  max-width: 100%;
  padding: 5px;
  margin-top: 125px;
  margin-left: 150px;
}
#myCarousel2-caption h1 {
margin: 0;
line-height: 1.25;
color: #FFF;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
font-size: 130%;
}
#myCarousel2-caption .lead 
{
margin: 0;
line-height: 1;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
font-size: 100%;
}
#myCarousel2-caption .btn {
  margin-top: 10px;
}

 /* RESPONSIVE CSS
-------------------------------------------------- */

@media (max-width: 979px) {

  .container.navbar-wrapper {
    margin-bottom: 0;
    width: auto;
  }
  .navbar-inner {
    border-radius: 0;
    margin: 0 0;
  }

  #myCarousel2 .item {
    height: 156px;
  }
  #myCarousel2 img {
    width: auto;
    height: 156px;
  }
}


@media (max-width: 767px) {

  #myCarousel2 {
    margin-left: -20px;
    margin-right: -20px;
  }
  #myCarousel2 .container {

  }
  #myCarousel2 .item {
    height: 100px;
  }
  #myCarousel2 img {
    height: 100px;
  }
  #myCarousel2-caption {
    width: 90%;
    padding: 5px 5px;
    margin-top: 125px;
    margin-left:60px;
  }
  #myCarousel2-caption h1 {
    font-size: 16px;
  }
  #myCarousel2-caption .lead,
  #myCarousel2-caption .btn {
    font-size: 14px;
  }
  #myCarousel2-caption {
  background-color: translucent;
  position: static;
  max-width: 100%;
  padding: 5px;
  margin-top: 75px;
}
#myCarousel2-caption h1 {
margin: 0;
line-height: 1.25;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
font-size: 100%;
padding-left: 20px;
}
#myCarousel2-caption .lead 
{
margin: 0;
line-height: 1;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
font-size: 100%;
padding-left: 20px;
}
#myCarousel2-caption .btn {
  margin-top: 10px;
}
}
@media (max-width: 400px) {

  #myCarousel2 {
    margin-left: -20px;
    margin-right: -20px;
  }
  #myCarousel2 .container {

  }
  #myCarousel2 .item {
    height: 60px;
  }
  #myCarousel2 img {
    height: 60px;
  }
  #myCarousel2-caption {
    width: 90%;
    padding: 5px 5px;
    margin-top: 125px;
    margin-left:30px;
  }
  #myCarousel2-caption h1 {
    font-size: 16px;
  }
  #myCarousel2-caption .lead,
  #myCarousel2-caption .btn {
    font-size: 14px;
  }
  #myCarousel2-caption {
  background-color: translucent;
  position: static;
  max-width: 100%;
  padding: 5px;
  margin-top: 40px;
}
#myCarousel2-caption h1 {
margin: 0;
line-height: 1.25;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
font-size: 100%;
padding-left: 20px;
}
#myCarousel2-caption .lead 
{
margin: 0;
line-height: 1;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
font-size: 100%;
padding-left: 20px;
}
#myCarousel2-caption .btn {
  margin-top: 10px;
}
}
</style>                                   


<div class="row span12">
<!-- Carousel
================================================== -->
  <div id="myCarousel2" class="carousel slide">
    <div class="carousel-inner">
      <div class="item active"> <img src="../../assets/img/communities.jpg" alt="">
        <div class="container">
          <div class="myCarousel2-caption">
            <h1>Rotary - we're for communities!</h1>
          </div>
        </div>
      </div>
      <div class="item"> <img src="../../assets/img/disaster1.jpg" alt="">
        <div class="container">
          <div class="myCarousel2-caption">
            <h1>Responding to disasters</h1>
            </div>
        </div>
      </div>
      <div class="item"> <img src="../../assets/img/polio1.jpg" alt="">
        <div class="container">
          <div class="myCarousel2-caption">
            <h1>Eradicating polio.</h1>
             </div>
        </div>
      </div>
      <div class="item"> <img src="../../assets/img/ryla1.jpg" alt="">
        <div class="container">
          <div class="myCarousel2-caption">
            <h1>Opportunities for young people</h1>
            </div>
        </div>
      </div>
    </div>
    <a class="left carousel-control" href="#myCarousel2" data-slide="prev">&lsaquo;</a> <a class="right carousel-control" href="#myCarousel2" data-slide="next">&rsaquo;</a> </div>
    <!-- /#myCarousel2 -->
</div>

<script>
  !function ($) {
    $(function(){
      // carousel demo
      $('#myCarousel2')#myCarousel2()
    })
  }(window.jQuery)
</script>