0
當前有一個引導程序傳送帶，每張幻燈片載入三個圖像。我想將它分開（最終只在移動設備上）爲每個幻燈片動態顯示一個圖像。這樣，每張幻燈片的桌面就有三張圖片，而且每張幻燈片的手機都有一張圖片。將Bootstrap Carousel圖片拆分爲單獨的幻燈片
HTML
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="carousel slide" data-ride="carousel" id="myCarousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="active" data-lightbox="1" data-slide-to="0" data-target="#myCarousel"></li>
</ol>
<div class="carousel slide" data-interval="false" data-ride="carousel" id="lightboxImageCarousel">
<ol class="carousel-indicators" style="display: none;">
<li class="active" data-slide-to="0" data-target="#lightboxImageCarousel"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4 col-sm-4">
<a class="example-image-link" data-lightbox="example-set-7" data-title="" href="#"><img class="img-responsive example-image" src="blank1.jpg"></a>
</div>
<div class="col-xs-4 col-sm-4">
<a class="example-image-link" data-lightbox="example-set-7" data-title="" href="#"><img class="img-responsive example-image" src="blank2.jpg"></a>
</div>
<div class="col-xs-4 col-sm-4">
<a class="example-image-link" data-lightbox="example-set-7" data-title="" href="#"><img class="img-responsive example-image" src="blank3.jpg"></a>
</div>
</div>
</div><a class="left carousel-control" data-slide="prev" href="#lightboxImageCarousel" role="button"><span aria-hidden="true" class="rslides1_nav prev"></span> <span class="sr-only">Previous</span></a> <a class="right carousel-control" data-slide="next" href="#lightboxImageCarousel" role="button"><span aria-hidden="true" class="rslides1_nav next"></span> <span class="sr-only">Next</span></a>
</div>
</div>
</div>
</div>
</div>
</section>
jQuery的
if ($('.item').has('.active')) {
var $itemActive = $('.item');
var countDivs = $itemActive[0].childElementCount;
console.log(countDivs);
// Remove classes and convert to XS 12, And hide the rest
$('.item').children().removeClass().addClass('col-xs-12').next().hide();
$('.item').each(function() {
console.log($('.item:nth-child(' + countDivs + ')'));
});
// Create a new Item and loop it to total number of col-xs-12 that exist inside of item
$('.carousel-inner').append("<div class='item'></div>")
// Add nth-child 1 of for Loop 1, and nth-child 2 for loop 2
// Where it breaks
$('.item.active').children().next().appendTo(".item").next().show();
}
(function() {
$('#myCarousel').carousel({
interval: 3200
});
}());
不幸的是，不會完全工作。例如，如果圖像1顯示在幻燈片1上，則需要隱藏其他2張圖像。但是當我點擊「下一步」按鈕時，圖片1應該隱藏幻燈片2，現在應該顯示圖片2。然後再次按「下一步」滑塊3，圖像2將隱藏，圖像3將顯示。 – askmeaquestion1234
然後製作兩個具有兩種不同行爲的容器。使用響應式實用程序類隱藏桌面上的移動視圖並在移動設備上隱藏桌面視圖。最終，如果您的桌面和移動視圖之間的差異變大，分割這兩個問題就會變得更加容易。 –
[看這個CodePen]（https://codepen.io/sumi1985/pen/LLgEEN） –