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
    });
});

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

Lightroomで画像の傾きを補正Lightroomで画像の傾きの角度を補正するやり方前のページ

シンプルで使い勝手がとてもいいツールチップを実装できるjQueryプラグイン「Tooltipster」次のページTooltipster

関連記事

  1. jQuery touchSwipe Carousel
  2. Line Maker

    JavaScript

    アニメーションするラインを実装できる「Line Maker」

    Line Makerは、いろんなアニメーションをするラインを実装するこ…

  3. ax5ui-menu

    JavaScript

    カスタマイズしやすいコンテキストメニューを実装できる「ax5ui-menu」

    ax5ui-menuはカスタマイズしやすいシンプルなコンテキストメニュ…

  4. ResponsifyJS

    JavaScript

    画像で見せたいエリアを保持しながらレスポンシブにできる「ResponsifyJS」

    ResponsifyJSは画像のなかで見せたいエリアを保持させながらレ…

  5. Switchery

    JavaScript

    チェックボックスをiOS7のようなスタイルにしてくれるjQueryプラグイン「Switchery」

    SwitcheryというjQueryプラグインを使えば、チェックボック…

  6. Smooth Anchor Scrolling

    JavaScript

    ページ内リンクをスクロールできる「Smooth Anchor Scrolling」

    ページ内リンクをスムーズにスクロールできる「Smooth Anchor…

コメント

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

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

最近の記事

  1. 紫陽花
  2. 生ハム&モッツァレラチーズ サラダラップ
  3. コガネムシ
  4. ショルダーハム&5種の野菜サンドイッチ
PAGE TOP