32

サムネイルのスライドを表示するには、Bootstrap 3.0 Carousel を作成する必要があります。これどうやってするの？これは私が探しているもののイメージです:

Bootstrap 3.0 カルーセル サム

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

4

4 に答える 4

41

Bootstrap 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

于 2013-09-17T14:19:19.233 に答える
9

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

col-xs-3

次のように、各サムネイルにクラスを追加します。

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

次に、電話の幅にサイズを縮小したときに、希望どおりの状態を維持する必要があります.

于 2013-09-18T13:44:36.040 に答える
4

これに最適なプラグインを見つけました：

http://flexslider.woothemes.com/

よろしく

于 2013-10-24T19:15:38.370 に答える