多個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

爲每個輪播使用一個唯一的標識，而不是.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

Answer 2

感謝巴斯 - 這幾乎是工作的現在就治療。

然而，有一對夫婦的事情發生了變化： 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>