1. 首頁
  2. 問答
  3. 需要同一頁面或同一站點上的多個引導程序傳送帶，但它們需要具有不同的尺寸

需要同一頁面或同一站點上的多個引導程序傳送帶，但它們需要具有不同的尺寸

2017-08-17 25 views

回答

0

這裏有旋轉木馬不同大小改變高度和你的旋轉木馬的寬度：CodePen Demo或者運行下面的代碼片段。

.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>

更新

，使其與引導3自動播放，在HTML的底部更新您的jQuery代碼，所以它看起來是這樣的。

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#firstCarousel').carousel({interval: 2000}); 
    $('#secondCarousel').carousel({interval: 2000}); 
}); 
</script>

注意：2000代表2000毫秒（2秒）。您可以通過爲每個輪播分配一個不同的號碼來改變速度。

來源

2017-08-17 00:41:30

+0

感謝您的努力，但是，我需要2個輪播，不同的高度和寬度。如前所述，我是新手，不瞭解情態。對不起，我的無知！ – Bazaboo

+0

@Bazaboo我明白了 - 對不起，我誤解了。 - 我在上面更新了我的答案。希望它有幫助。 –

+0

好的！有2個輪播，大小不同，但不會自動播放。 – Bazaboo

0 
<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，那麼你可以用自己的身份證

#firstCarousel{ 
    width: 600px; 
    height: 380px; 
} 
#secondCarousel{ 
    width: 450px; 
    height: 285px; 
}

來源

2017-08-17 00:29:21

+0

謝謝！我會嘗試。我確實想出了一個頭腦風暴的解決方法 - 我創建了一個新的CSS文件，只是一個特定的頁面，只是傳送帶的CSS和修改。然後將該css文件包含在頁面中。它有效，但是，我相信這不是「正確」的方式來處理這個問題。此外，它不處理同一頁上的不同大小的輪播... ...會讓你知道你善意的解決方法的結果！ – Bazaboo

+0

這似乎沒有工作。兩個輪播是相同的大小，他們在頁面上下跳動 – Bazaboo

相關問題

 相關問題