0

我想要一个“长而细”的轮播作为页眉，并在页面正文中有一个“常规”尺寸的轮播。每个在 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 滑块？

4

2 回答 2

2

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

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

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

将您的 css 规则应用到 id 上，例如：

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

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

于 2013-06-29T11:02:32.080 回答
0

谢谢巴斯-现在几乎可以享受了。

但是，有几件事发生了变化：1）标题位置被忽略（标题1样式取自页面，而不是轮播设置）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>
于 2013-07-09T11:39:35.627 回答