4

ブートストラップ画像のサムネイル スライダーを作成しました。スライダーに 4 つの画像を通常の画面サイズで表示しています。

デモの URL:

レスポンシブごとに、小さな画面のサムネイルスライダーに画像を1つだけ表示したいと思います。

私の現在のデザインイメージ

私の必要な設計モデル

私にアドバイスしてください.私はレスポンシブデザインの初心者です。

私のコード:

<div class="container">

  <div class="span8">

    <h1>Bootstrap Thumbnail Slider</h1>

    <div class="well">

    <div id="myCarousel" class="carousel slide">

    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Carousel items -->
    <div class="carousel-inner">

    <div class="item active">
        <div class="row-fluid">
          <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
          <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
          <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
          <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
        </div><!--/row-fluid-->
    </div><!--/item-->

    <div class="item">
        <div class="row-fluid">
            <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
            <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
            <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
            <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
        </div><!--/row-fluid-->
    </div><!--/item-->

    <div class="item">
        <div class="row-fluid">
            <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
            <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
            <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
            <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
        </div><!--/row-fluid-->
    </div><!--/item-->

    </div><!--/carousel-inner-->

    <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹&lt;/a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">›&lt;/a>
    </div><!--/myCarousel-->

    </div><!--/well-->
  </div>
</div>
4

1 に答える 1

2

CSS だけでこのソリューションを実現できるとは思えません。カルーセルのスライドはクラス「アイテム」であるため、これが小さな画面になると、3 つのアイテム スライドが表示されますが、各スライドに 4 つの縦に積み重ねられたサムネイルがあります (各スライドのスパン 3 コンテンツは、ブートストラップ レスポンシブ クラスで積み重ねられます)。 ）。ただし、2 つの回避策があります。

オプション 1 - より簡単

カルーセルを 2 つ用意します。1つはあなたが示したもので、もう1つは行流体とアイテムのラッパーを省略し、アイテムを各スパン3に配置します。オリジナルは「hidden-phone」クラスを取得し、新しいものは「visible-phone」クラスを取得します。さらに、携帯電話版ではスライド インジケーターを省略して、多くの項目が煩雑にならないようにすることをお勧めします。以下に、jsfiddle の例へのリンクを含めました。中央の垂直フレーム セパレータを右に移動するだけで、電話の幅にサイズ変更できます (逆も同様です)。

http://jsfiddle.net/guydog28/tEKg8/

オプション 2 - よりハード

2番目のオプションははるかに困難です。カルーセルが 1 つだけ必要な場合は、ウィンドウのサイズ変更イベントをキーにして、電話のサイズまたは電話のサイズを超えているかどうかを確認する必要があります。次に、実際にDOMを操作して、カルーセルをカルーセル2のように見せ、ウィンドウのサイズを変更して元に戻す必要があります。したがって、JavaScript は次のようになります。

$(document).ready(function () {
    //start the carousel
    $(".carousel").carousel();

    //bind to window resize event to see if we've toggled 
    //between phone and larger
    $(window).resize(function () {
        if ($(window).width() < 768) {
          //Phone size, manipulate DOM for phone here
        } else {
          //Not phone size, re-manipulate DOM to get back to original carousel
        }
        //Re-init carousel
        $(".carousel").carousel();
    });
});
于 2013-09-19T01:57:52.500 に答える