web-dev-qa-db-ja.com

Bootstrap 3.0にサムネイルがあるカルーセル

サムネイルのスライドを表示するには、Bootstrap 3.0 Carouselを作成する必要があります。これを行うにはどうすればよいですか？これは私が探しているものの画像です：

Bootstrap 3.0 Carousel Thumbs

これはBootstrap 2の動作例ですが、Bootstrap 3.0 .: Bootstrap Thumbnail Slider にはこれが必要です。

twitter-bootstraptwitter-bootstrap-3slidercarouselthumbnails
31
Martín

ブートストラップ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

39
Zim

@Skellyの答えは正しいです。コメント（<50 rep）を追加することはできません...しかし、彼の答えであなたの質問に答えるために：あなたが追加した場合、彼がリンクした例では

col-xs-3

次のように、各サムネイルのクラス：

class="col-md-3 col-xs-3"

携帯電話の幅に合わせてサイズを小さくしても、希望どおりに維持されるはずです。

9
guydog28

このための素晴らしいプラグインを見つけました：

http://flexslider.woothemes.com/

よろしく

4
rafamiranda
  1. カルーセルのインジケーターを使用して、サムネイルを表示します。
  2. CSSでサムネイルをメインカルーセルの外側に配置します。
  3. インジケーターの最大高さをサムネイルより大きくならないように設定します。
  4. カルーセルがスライドするたびに、インジケータの位置を更新し、アクティブなインジケータをインジケータの中央に配置します。

私は自分のサイトでこれを使用しています（たとえば 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;
0
MastaBaba