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

    JavaScript

    ダイナミックに回転してコンテンツが切り替わる「Page Scroll 3D」

    Page Scroll 3Dは、クルッとダイナミックに回転してコンテン…

  2. bubbly-bg

    JavaScript

    幻想的なバブル背景アニメーションを実装できる「bubbly-bg」

    bubbly-bgは幻想的で美しいバブル(気泡)背景アニメーションを実…

  3. Grasp Mobile Progress Circle
  4. HR Navigation Responsive Menu
  5. WD_ImageStax

    JavaScript

    山積みされた写真をシャッフルさせるフォトギャラリー「WD_ImageStax」

    WD_ImageStaxは無造作に山積みされた写真をシャッフルさせるフ…

  6. Responsive Elements

コメント

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

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

最近の記事

  1. Soundcore Ace A1
  2. cheero USB-C PD Charger 60W
  3. DY-S01
  4. OWL-QI10W04

アーカイブ

PAGE TOP