スライドが切り替わるタイミングも分かりやすく表示させるギャラリーを実装できるjQueryプラグイン「SWAPMYLI」

シンプルでよさそうだったのでメモしときます。スライドが切り替わるタイミングも分かりやすく表示させるギャラリーを実装できるjQueryプラグイン「SWAPMYLI」です。画像を次々にスライドさせていくギャラリーを実装したい時に覚えておきたいプラグインですね。実際の公式サイトのデモではレスポンシブ対応にもなっています。

[ads_center]

使い方

jQuery本体とダウンロードしたCSS、JSファイルを読み込みます。

<link rel="stylesheet" href="swapmyli/swapmyli.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="swapmyli/swapmyli.js"></script>

作成したリストをセレクタに指定してプラグインをセットします。

<script>
$(function() {
    $('ul').swapmyli();
});
</script>

シンプルで使いやすそうですね。

オプションもあるので自分好みにカスタマイズすることもできます。

$(function() {
    $('#sample').swapmyli({
        swapTime: 900,
        transitionTime: 700,
        time: 4000,
        timer: 1,
        css: 1
    });
});

ダウンロードや詳しい詳細については以下の公式サイトで確認することができます。

SWAPMYLI