スマホサイト・アプリをつくろう。

こんにちは、田中です。

複数の画像をスライド風に表示するのに便利な「FlexSlider」というjQueryプラグインがあります。

これは大変高機能で便利なのですが、縦長の画像を表示すると、幅を親要素の100％にして表示してしまいます。

画像のサイズが決まっているときはこれでいいですが、縦長、横長、正方形の画像を混ぜてスライドにしたい時は調整が必要になります。

導入方法

公式サイトからソースをダウンロード。

JS
jqueryとjquery.flexslider.jsを読み込み、
divクラスを指定して起動します。

$(“.flexslider”).flexslider();

HTML

<div class=”flexslider”>
<ul class=”slides”>
<li>
<img src=”image1.jpg” />
<p class=”flex-caption”>画像1のキャプション</p>
</li>
<li>
<img src=”image2.jpg” />
<p class=”flex-caption”>画像2のキャプション</p>
</li>
<li>
<img src=”image3.jpg” />
<p class=”flex-caption”>画像3のキャプション</p>
</li>
</ul>
</div>

画像を列挙します。
スライドボタン、画像指定ボタンはCSSでクラス指定します。
.flex-control-nav li a
.flex-direction-nav li a

画像の表示位置を調整

下部の「カルーセル」で選んだ画像を上部に表示するスライダーを作りました。

縦長、横長の画像を混ぜて表示すると、画像が潰れて、横幅いっぱいに拡大表示されてしまいます。

そこで、高さと幅を最大値以上に広げないようJSで調整しました。
指定するオプションは「start」「before」「after」です。

$('#slider').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        sync: "#carousel",
        start: function() {
            modifySliderSize();
        },
        before: function() {
            modifySliderSize();
        },
        after: function() {
            modifySliderSize();
        }
     });
function modifySliderSize() {
    $('#slider .slides li').css('width','400px');
    $('#slider .slides li').css('height','350px');
    $('#slider .slides li img').css('margin','0 auto');
    $('#slider .slides li img').css('width','auto');
    $('#slider .slides li img').css('max-width','400px');
    $('#slider .slides li img').css('max-height','350px');

    $('#carousel .slides li').css('width','210px');
    $('#carousel .slides li').css('height','170px');
    $('#carousel .slides li img').css('margin','0 auto');
    $('#carousel .slides li img').css('width','auto');
    $('#carousel .slides li img').css('max-width','210px');
    $('#carousel .slides li img').css('max-height','170px');
}

画像の元サイズ通りに表示されるようになりました。