JavaScript

軽量(5KB)で機能も色々あるjQueryのスライダー「MobilySlider」を使ってみる

軽量なんですが、色々と機能もあるいい感じのjQueryプラグイン「MobilySlider」を使ってみました。アニメーションも、水平方向、垂直方向にスライドさせたり、フェードで切り替えたりもできます。デザインもとてもシンプルですし、個人的には結構使いやすいスライダーかと思いました。ということで以下サンプルと合わせて簡単な使い方です。

[ads_center]

使い方

以下のURLからダウンロードできます。

jQuery本体とプラグインを読み込みます。

<link href="css/default.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/mobilyslider.js" type="text/javascript"></script>
<script src="js/init.js" type="text/javascript"></script>

HTMLはシンプルにこんな感じです。

<div class="slider">
    <div class="sliderContent">
        <div class="item">
            <img src="img/img1.jpg" alt="" />
        </div>
        <div class="item">
            <img src="img/img2.jpg" alt="" />
        </div>
        <div class="item">
            <img src="img/img3.jpg" alt="" />
        </div>
    </div>
</div>

これだけで簡単にスライダーを実装できます。とても簡単ですね。init.jsにオプションを色々設定できるので、そこの値を変更することでアニメーションやスピードなんかを設定できます。

一応サンプルを作ってみました。

サンプル1

こちらはデフォルトのオプションです。以下のように設定されています。

$(function(){
    $('.slider').mobilyslider({
        content: '.sliderContent',
        children: 'div',
        transition: 'horizontal',
        animationSpeed: 500,
        autoplay: false,
        autoplaySpeed: 3000,
        pauseOnHover: false,
        bullets: true,
        arrows: true,
        arrowsHide: true,
        prev: 'prev',
        next: 'next',
        animationStart: function(){},
        animationComplete: function(){}
    });
});

transitionの値を変えるとアニメーションを変更できます。horizontalの他に、vertical、fadeを指定することができます。

サンプル2

以下はオプションをtransitionをfadeにしたサンプルです。

こんな感じで色々とオプションを変更することで簡単にまた違った印象のスライダーになるのでお手軽ですね。

リストのテキストを1つずつ垂直にスライドさせていくjQueryのティッカー「Totem Ticker」前のページ

iPhoneとAndroidのSDKのシュミレーターをMacにインストールしてみた次のページ

関連記事

  1. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでJavaScriptのfor…inを使ってオブジェクトから値を1つずつ取り…

    JavaScriptにはfor...inというプロパティの数だけ繰り返…

  2. JavaScript

    ボタンやアイコンに素敵なクリックエフェクトを実装できる「Waves」

    ボタンやアイコンに素敵なクリックエフェクトを実装することができる「Wa…

  3. Micromodal.js

    JavaScript

    アクセシブルで軽量なモーダルダイアログを実装できる「Micromodal.js」

    Micromodal.jsは、アクセシブルでファイル容量も軽量なモーダ…

  4. Responsive jQuery Pop Up Gallery
  5. vallenato.js

    JavaScript

    シンプルで実装も簡単なjQueryアコーディオン「vallenato.js」

    vallenato.jsは、シンプルで簡単に実装することができるjQu…

  6. Luminous

    JavaScript

    軽くてシンプルなLightboxを実装できるスクリプト「Luminous」

    Luminousを使えば軽くてシンプルなLightboxを実装すること…

コメント

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

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

最近の記事

  1. DCG-CA21
  2. Apple WatchでのMacロック解除を無効
  3. オータムスイートポテトフラペチーノ
  4. 紅葉
  5. ナノケア EH-NA0E

アーカイブ

PAGE TOP