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. Magnific Popup

    JavaScript

    レスポンシブに対応したLightbox風のjQueryプラグイン「Magnific Popup」

    レスポンシブに対応したLightbox風のjQueryプラグイン「Ma…

  2. Raindrops.js

    JavaScript

    水面に雨粒が落ちてくるエフェクトが素敵なjQueryプラグイン「Raindrops.js」

    Raindrops.jsは水面に雨粒が落ちてくる素敵なエフェクトを実装…

  3. Light-Zoom

    JavaScript

    CSSを使用した画像ズームを実装できるjQueryプラグイン「Light-Zoom」

    Light-Zoomは純粋なCSSを使用した画像ズーム(拡大)機能を実…

  4. Cloud 9 Carousel

    JavaScript

    サクサク動作する3Dカルーセルを実装できる「Cloud 9 Carousel」

    Cloud 9 Carouselはサクサク動作する3Dカルーセルを実装…

  5. PopCircle

最近の記事

  1. 有栖川公園
  2. グーディオ オーガニックチョコレート(ミント)
  3. チキンバターマサラとシュリンプバターマサラ
  4. 恵比寿のダ・ミケーレのピザ
  5. ハムエッグホットサンドとドリップコーヒー

アーカイブ

PAGE TOP