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. Complexify

    JavaScript

    パスワードの強さを視覚的にフィードバックしてくれる「Complexify」

    Complexifyはユーザーが入力したパスワードの強さを視覚的にフィ…

  2. Tooltipster

    JavaScript

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

    シンプルで使い勝手がとてもいいツールチップを実装できるjQueryプラ…

  3. JavaScript

    JavaScriptで連想配列(ハッシュ)から1つずつ値を取り出して配列に入れてランダムで取得する

    タイトルが分かりづらくてあれなんですが、JavaScriptの連想配列…

  4. funnyText.js
  5. Typed.js

    JavaScript

    プログラムを入力するようにタイプするエフェクトを実装できる「Typed.js」

    Typed.jsは、プログラムを入力するように文字をタイプしてくれるエ…

  6. A simple DIY responsive image slideshow

コメント

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

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

最近の記事

  1. そそそ 明太クリームそうめん
  2. すしざんまい
  3. 蒼龍唐玉堂 特製牛バラ担々麺
  4. サーモンアボカドサラダラップとドリップ
  5. 猿田彦フレンチ

アーカイブ

PAGE TOP