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

    JavaScript

    シンプルで使いやすい画像ズームを実装できるjQueryプラグイン「spzoom」

    spzoomはシンプルな操作性で使いやすい画像ズーム機能を実装できるj…

  2. JS Form Validator

    JavaScript

    HTMLフォームの検証を簡単に実装できる「JS Form Validator」

    JS Form ValidatorはHTMLフォームの検証を簡単に実装…

  3. no-image

    JavaScript

    さまざまなSVGパターンによるCSSプログレスバー「Bars」

    Barsはさまざまな種類のSVGパターンによるCSSプログレスバーを実…

  4. JavaScript

    レスポンシブやスワイプ対応で完成度の高いスライダーのjQueryプラグイン「Slider Pro」

    Slider Proはレスポンシブやタッチ・スワイプに対応したスライダ…

  5. uploadHBR

    JavaScript

    複数の画像選択に対応したjQueryファイルアップローダー「uploadHBR」

    uploadHBRは複数の画像選択に対応したファイルアップローダーを実…

  6. jquery.datepicker

    JavaScript

    未来的なデータピッカーを実装できる「jquery.datepicker」

    jquery.datepickerはWeb用の未来的なデータピッカーを…

最近の記事

  1. RF85mm F2 MACRO IS STM
  2. Anker PowerWave Pad Alloy
  3. Anker Bolder LC30
  4. BG-R10

アーカイブ

PAGE TOP