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

为每个轮播而不是.carousel类使用唯一ID。是。 id =“myCarousel1”，id =“myCarousel2”等。另请参阅：https://stackoverflow.com/a/10521804/1596547。

通过javascript启动您的carousal：

   $('#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

感谢巴斯 - 现在几乎可以成为一种享受。

然而，有一些事情发生了变化： 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>

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

2 个答案: