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. no-image

    JavaScript

    2枚の画像の違いを比較できるjQueryプラグイン「baSlider」

    baSliderはビフォー・アフターのような2枚の画像の違いを比較でき…

  2. Shorten

    JavaScript

    長いテキストを自動で短縮してくれるjQueryプラグイン「Shorten」

    Shortenは指定した文字数以上の長いテキストを自動的に短縮してくれ…

  3. fullPage.js

    JavaScript

    フルページでコンテンツごとにスクロールする「fullPage.js」

    fullPage.jsはフルページでコンテンツごとにスクロールするレス…

  4. Create a month picker jQuery plugin
  5. no-image

    JavaScript

    画像の遅延読み込みを実装できる軽量のJavaScriptプラグイン「justlazy.js」

    justlazy.jsは画像の遅延読み込みを実装することができるJav…

コメント

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

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

最近の記事

  1. ハワイ カウ
  2. ぼんしゃん全部入り
  3. ナイトロコーヒー
  4. チーズベーコンエッグバーガー
PAGE TOP