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. Bootstrap Navbar Sidebar

    JavaScript

    サイドに固定できるナビゲーション実装「Bootstrap Navbar Sidebar」

    Bootstrap Navbar Sidebarは、サイドに固定できる…

  2. stickyNavbar.js
  3. JavaScript

    テキストを中央に向かうにつれて大きくしたりできるjQueryプラグイン「jqIsoText」

    結構おもしろかったのでメモしときます。テキストに簡単なエフェクトをかけ…

  4. jRCarousel

    JavaScript

    モダンエフェクトなレスポンシブ対応のカルーセル実装「jRCarousel」

    jRCarouselはモダンエフェクトなカルーセルを実装できるjQue…

  5. jCalculator

    JavaScript

    jQueryプラグインで電卓を実装できる「jCalculator」

    jCalculatorというjQueryプラグインを使えば入力フィール…

  6. Excolo Slider

    JavaScript

    タッチにも対応しているシンプルなjQueryスライダー「Excolo Slider」

    タッチやマウススライドにも対応しているシンプルなjQueryスライダー…

コメント

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

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

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP