0
現在、スライドごとに3つの画像を読み込むブートストラップカルーセルがあります。私はこれを分割して（最終的にはモバイルのみ）、スライドごとに1つのイメージを動的に作成したいと考えています。このように、デスクトップには1つのスライドに3つの画像があり、モバイルには1つのスライドに1つの画像があります。ブートストラップカルーセル画像を別々のスライドに分割する
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
次に、2つの異なる振る舞いで2つのコンテナを作成します。応答可能なユーティリティクラスを使用して、デスクトップ上のモバイルビューを非表示にし、モバイル上のデスクトップビューを非表示にします。結局、デスクトップビューとモバイルビューの違いが大きくなる場合は、2つの問題を分割する方が簡単になります。 –
[このCodePenを参照]（https://codepen.io/sumi1985/pen/LLgEEN） –