Before and after slider

JavaScript

ビフォーアフター画像を実装できるjQueryプラグイン「Before and after slider」

Before and after sliderというjQueryプラグインを使えば、ビフォーアフター画像を実装することができます。スライド機能もついていて、クリック&ドラッグで左右にスライドさせることができます。これによりビフォーとアフターを自由に見比べることができるのでとても便利です。

[ads_center]

Before and after sliderの使い方

実際のデモは以下から確認することができます。

Before and after slider

デモ

デモでは、パソコンの場合はクリック&ドラッグでスライドできます。スマホからも動作を確認してみたところ、フリックスライドできました。とても便利ですね。

画像をマークアップする場合は以下のように記述します。とても分かりやすいですね。

<div class="slider responsive">
    <div class="left image">
        <img src="before.jpg"/>
    </div>

    <div class="right image">
        <img src="after.jpg"/>
    </div>
</div>

で、プラグインをセットします。

<script type="text/javascript">
    $('.slider').slider();
</script>

使い方や機能ともにシンプルで使いやすいjQueryプラグインですね。左右にスライドさせることで、ビフォー、アフターの画像の見れる面積を自由に調整できる辺りが便利だと思います。

Before and after slider

関連記事

  1. jQuery.GI.TheWall.js
  2. Chameleon.js
  3. A simple jQuery Accordion with unlimited nesting

    JavaScript

    シンプルなアコーディオンを実装する「A simple jQuery Accordion with u…

    シンプルで見やすいアコーディオンを実装することができる「A simpl…

  4. Tikslus Carousel
  5. JavaScript

    カスタマイズしやすい軽量のツールチップを実装できるjQueryプラグイン「TinyTip」

    TinyTipはカスタマイズしやすいツールチップを実装することができる…

  6. JavaScript

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Shadow Plugin

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Sh…

最近の記事

  1. Kindle Oasis
  2. OWL-WDDESK01
  3. ワンタッチ着脱フィルターキット
  4. Soundcore Ace A1

アーカイブ

PAGE TOP