SWAPMYLI

JavaScript

スライドが切り替わるタイミングも分かりやすく表示させるギャラリーを実装できる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
    });
});

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

関連記事

  1. slideSpeed

    JavaScript

    スライドアップ・ダウンを設定された速度で制御できる「slideSpeed」

    slideSpeedは、特定の要素のスライドアップ・スライドダウンを設…

  2. Lightbox

    JavaScript

    jQuery依存なしのシンプルなライトボックス機能を実装できる「Lightbox」

    LightboxはjQueryに依存することなくシンプルなライトボック…

  3. trunk8

    JavaScript

    長い(はみ出した)テキストを「・・・」に置き換えてくれるjQueryプラグイン「trunk8」

    長いテキストやはみ出したテキストを「・・・」といった文字に置き換えてく…

  4. JavaScript

    画像にマウスオーバーするとズームして綺麗にエフェクトがかかるjQueryプラグイン「Swish」

    画像にマウスオーバーをするとズームして綺麗なオーバーレイのエフェクトが…

  5. Owl Carousel

    JavaScript

    タッチ操作やレスポンシブにも対応したカルーセルを実装できるjQueryプラグイン「Owl Carou…

    素晴らしいカルーセルを実装できるjQueryプラグインがあったのでご紹…

  6. no-image

    JavaScript

    豊富なオプションでカスタマイズ性も高いjQueryスライダー「startVal」

    startValは豊富なオプションやAPIを有したカスタマイズ性の高い…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. mill オイルヒーター
  2. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP