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

ベストなWordPressテーマ集無料&有料のベストなWordPressテーマ集(2014年8月)前のページ

過去と現在のミニマルなロゴの見比べがおもしろい次のページ過去と現在のミニマルなロゴ

関連記事

  1. Tooltipster

    JavaScript

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

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

  2. Coin Slider

    JavaScript

    ユニークなエフェクトを実装できるjQueryイメージスライダー「Coin Slider」

    ユニークなエフェクトで画像がスライドしていくjQueryイメージスライ…

  3. no-image

    JavaScript

    クッキーバナーを手軽に作れるjQueryプラグイン「Cookie Banner JS」

    Cookie Banner JSは、Webサイト上に表示させるクッキー…

  4. Dependent Dropdown

    JavaScript

    ネストされたセレクトボックスを実装できる「Dependent Dropdown」

    Dependent Dropdownはネストされたセレクトボックスを実…

  5. no-image

    JavaScript

    シンプルなバナースライドショーを実装できる「jsslider」

    jssliderはシンプルなバナースライドショーを実装できるjQuer…

  6. no-image

    JavaScript

    シンプルでカスタマイズも簡単なパララックスエフェクト実装「parlx.js」

    parlx.jsはシンプルでカスタマイズも簡単なパララックスエフェクト…

最近の記事

  1. パーソナルパーティション
  2. 200-DGBG020

アーカイブ

PAGE TOP