サムネイルのスライドを表示するには、Bootstrap 3.0 Carouselを作成する必要があります。これを行うにはどうすればよいですか?これは私が探しているものの画像です:
これはBootstrap 2の動作例ですが、Bootstrap 3.0 .: Bootstrap Thumbnail Slider にはこれが必要です。
ブートストラップ4(2019更新)
複数アイテムのカルーセルは、いくつかの方法で実現できます ここで説明したように 。もう1つのオプションは、 カルーセルスライドをナビゲートするための個別のサムネイル を使用することです。
ブートストラップ3(元の回答)
これは、各カルーセルアイテム内のグリッドを使用して実行できます。
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-3">..
</div>
<div class="col-sm-3">..
</div>
<div class="col-sm-3">..
</div>
<div class="col-sm-3">..
</div>
</div>
<!--/row-->
</div>
...add more item(s)
</div>
</div>
カルーセルを使用したデモのサムネイルスライダー:
http://www.bootply.com/81478
サムネイルとしてカルーセルインジケーターを使用した別の例: http://www.bootply.com/79859
@Skellyの答えは正しいです。コメント(<50 rep)を追加することはできません...しかし、彼の答えであなたの質問に答えるために:あなたが追加した場合、彼がリンクした例では
col-xs-3
次のように、各サムネイルのクラス:
class="col-md-3 col-xs-3"
携帯電話の幅に合わせてサイズを小さくしても、希望どおりに維持されるはずです。
私は自分のサイトでこれを使用しています(たとえば here )が、遅延読み込みを行うためにいくつかの追加のものを使用しています。つまり、コードを抽出するのは私が望んでいるほど簡単ではありませんバイオリンを入れるために。
また、私のテンプレートエンジンは smarty ですが、あなたはそのアイデアを確実に得られるはずです。
肉...
インジケーターの更新:
<ol class="carousel-indicators">
{assign var='walker' value=0}
{foreach from=$item["imagearray"] key="key" item="value"}
<li data-target="#myCarousel" data-slide-to="{$walker}"{if $walker == 0} class="active"{/if}>
<img src='http://farm{$value["farm"]}.static.flickr.com/{$value["server"]}/{$value["id"]}_{$value["secret"]}_s.jpg'>
</li>
{assign var='walker' value=1 + $walker}
{/foreach}
</ol>
インジケーターに関連するCSSの変更:
.carousel-indicators {
bottom:-50px;
height: 36px;
overflow-x: hidden;
white-space: nowrap;
}
.carousel-indicators li {
text-indent: 0;
width: 34px !important;
height: 34px !important;
border-radius: 0;
}
.carousel-indicators li img {
width: 32px;
height: 32px;
opacity: 0.5;
}
.carousel-indicators li:hover img, .carousel-indicators li.active img {
opacity: 1;
}
.carousel-indicators .active {
border-color: #337ab7;
}
カルーセルがスライドしたら、サムネイルのリストを更新します。
$('#myCarousel').on('slid.bs.carousel', function() {
var widthEstimate = -1 * $(".carousel-indicators li:first").position().left + $(".carousel-indicators li:last").position().left + $(".carousel-indicators li:last").width();
var newIndicatorPosition = $(".carousel-indicators li.active").position().left + $(".carousel-indicators li.active").width() / 2;
var toScroll = newIndicatorPosition + indicatorPosition;
var adjustedScroll = toScroll - ($(".carousel-indicators").width() / 2);
if (adjustedScroll < 0)
adjustedScroll = 0;
if (adjustedScroll > widthEstimate - $(".carousel-indicators").width())
adjustedScroll = widthEstimate - $(".carousel-indicators").width();
$('.carousel-indicators').animate({ scrollLeft: adjustedScroll }, 800);
indicatorPosition = adjustedScroll;
});
また、ページが読み込まれたら、サムネイルの初期スクロール位置を設定します。
var indicatorPosition = 0;