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

    画面全体に背景を表示させフェードやスライドもできるjQuery「bgStretcher」

    ブラウザの画面全体に背景を表示させることができるjQueryプラグイン…

  2. PreViewTube.js
  3. no-image
  4. jQuery Social Share Bar
  5. megamenu.js

    JavaScript

    レスポンシブでスマートなメガメニューを実装できる「megamenu.js」

    megamenu.jsはjQueryを使ったレスポンシブでスマートなメ…

  6. jcSlider

    JavaScript

    CSS3を使ったレスポンシブ対応スライダーを実装できるjQueryプラグイン「jcSlider」

    jcSliderは、アニメーションを使用しないスライダーのプラグインで…

コメント

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

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

最近の記事

  1. cheero Power Mountain mini 30000mAh CHE-110
  2. 帆布カメラインナーケース B-2タイプ
  3. 雨粒

アーカイブ

PAGE TOP