Bootstrap カルーセルを使用しています。カルーセルをレスポンシブにして、画面の幅に応じて異なる数のアイテムを画面に表示したいと考えています。
たとえば、カルーセルに表示したいものが 6 つあるとします。
人がモバイルで表示している場合、カルーセルの下にある 6 つのインジケーター ボタンを使用して一度に 1 つのアイテムを表示し、残りのアイテムを切り替えたいと考えています。
<section>
<div class="container">
<h2>Mobile - 1 box on screen</h2>
<div class="row">
<div id="document-slider-mobile" class="carousel slide" data-ride="">
<div class="carousel-inner">
<ol class="carousel-indicators">
<li class="indicator active" data-slide-to="0" data-target="#document-slider-mobile"></li>
<li class="indicator" data-slide-to="1" data-target="#document-slider-mobile"></li>
<li class="indicator" data-slide-to="2" data-target="#document-slider-mobile"></li>
<li class="indicator" data-slide-to="3" data-target="#document-slider-mobile"></li>
<li class="indicator" data-slide-to="4" data-target="#document-slider-mobile"></li>
<li class="indicator" data-slide-to="5" data-target="#document-slider-mobile"></li>
</ol>
<div class="item col-sm-12 active"><div class="box"><h3>This is box 1</h3></div></div>
<div class="item col-sm-12"><div class="box"><h3>This is box 2</h3></div></div>
<div class="item col-sm-12"><div class="box"><h3>This is box 3</h3></div></div>
<div class="item col-sm-12"><div class="box"><h3>This is box 4</h3></div></div>
<div class="item col-sm-12"><div class="box"><h3>This is box 5</h3></div></div>
<div class="item col-sm-12"><div class="box"><h3>This is box 6</h3></div></div>
</div>
</div>
</div>
</div>
</section>
ただし、人がデスクトップで表示している場合は、カルーセルの下にある 2 つのインジケーター ボタンを使用して、一度に 4 つのものを表示したいと考えています (1 番目には 4 つのアイテムがあり、2 番目には 2 つのアイテムがあります)。
さまざまなシナリオと、カルーセルの外観と動作を示す例を作成しました。デモでは、これを実現するために 3 つの異なるカルーセルを使用しています。明らかに、1 つのレスポンシブ バージョンを探しています。
jsfiddle の例を次に示します (パネルのサイズを変更する必要がある場合があります): jsfiddle
