帶有多個項目的 Bootstrap 輪播

Question

我正在研究一個在JSFiddle上可用的項目。 如您所見，顯示了 6 個項目，我想制作一個輪播以在每張幻燈片上顯示 3 個項目。 在研究了這個問題之后，我在Codepen上發現了這個很棒的項目。 我的項目的每一項都由以下代碼表示：

 <div class="wrapper"> <img src="https://photos-2.dropbox.com/t/2/AACS3GcxUnMu4DpsfC5pF-zF55I8WHf1blL4AvkQULu1Gw/12/226666032/jpeg/32x32/1/_/1/2/3.jpg/EO2pmKoBGHsgAigC/iV0gUV38M-Y4EoQJWevkk6_etV3EZi1baTQUzImrReM?size=1024x768&size_mode=3" alt="" /> <div class="overlay"> <h2 class="header">A Movie in the Park: Kung Fu Panda</h2> </div> </div>

而 Codepen 上的項目由這個表示：

 <div class="item active"> <div class="col-xs-4"> <a href="#1"><img src="http://placehold.it/300/f44336/000000" class="img-responsive"></a> </div> </div>

每當我嘗試在 Codepen 中刪除項目代碼並從 JSFiddle 放置項目代碼時，滑塊就會停止工作。

請讓我知道如何解決這個問題。

Answer 1

這是你想要的嗎？ 請檢查小提琴，你會明白，為什么它不起作用。 您可能錯過了一些庫和 CSS。

 $('#theCarousel').carousel({ interval: false }) $('.multi-item-carousel .item').each(function(){ var next = $(this).next(); if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this)); if (next.next().length>0) { next.next().children(':first-child').clone().appendTo($(this)); } else { $(this).siblings(':first').children(':first-child').clone().appendTo($(this)); } });

 .multi-item-carousel{ .carousel-inner{ > .item{ transition: .6s ease-in-out all; } .active{ &.left{ left:-33%; } &.right{ left:33%; } } .next{ left: 33%; } .prev{ left: -33%; } } .carouse-control{ &.left, &.right{ background-image: none; } } @media all and (transform-3d), (-webkit-transform-3d) { &{ .carousel-inner { > .item{ transition: .6s ease-in-out all; -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-perspective: none; -webkit-transform: none!important; transform: none!important; } } } } }

 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <div class="container"> <div class="col-md-8 col-md-offset-2"> <div class="carousel slide multi-item-carousel" id="theCarousel"> <div class="carousel-inner"> <div class="item active"> <div class="col-xs-4 wrapper"> <a href="#1"><img src="http://placehold.it/300/f44336/000000" class="img-responsive"></a> </div> </div> <div class="item"> <div class="col-xs-4"> <a href="#1"><img src="http://placehold.it/300/e91e63/000000" class="img-responsive"></a> <div class="overlay"> <h5 class="header">A Movie in the Park: Kung Fu Panda</h5> </div> </div> </div> <div class="item"> <div class="col-xs-4"> <a href="#1"><img src="http://placehold.it/300/9c27b0/000000" class="img-responsive"></a> <h5 class="header">Batman Return</h5> </div> </div> <div class="item"> <div class="col-xs-4"> <a href="#1"><img src="http://placehold.it/300/673ab7/000000" class="img-responsive"></a> <h5 class="header">Deadpool</h5> </div> </div> <div class="item"> <div class="col-xs-4"> <a href="#1"><img src="http://placehold.it/300/4caf50/000000" class="img-responsive"></a> </div> </div> <div class="item"> <div class="col-xs-4"> <a href="#1"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></a> </div> </div> </div> <a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a> <a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a> </div> </div> </div>

Answer 2

閱讀輪播文檔並注意每個項目的格式（特別是.item和.active ）。

每個圖像周圍的這個包裝器使得每行顯示 3 個元素：

<div class="col-xs-4">
    ...
</div>

（相比之下，使用.col-xs-12表示每行顯示 1 張圖像，使用.col-xs-6表示每行顯示 2 張圖像）