no-image

JavaScript

アクセシブルなビフォーアフター画像を実装できる「BeerSlider」

BeerSliderはVanilla JSによるアクセシブルなビフォーアフター画像を実装できます。2枚の画像を比較する時にはとても便利な機能です。中央のボタンをスライドさせることで簡単に比較できるほか、キーボードにも対応しています。

2枚の画像を効率よく比較

デモ

画像の中央には左右の矢印が付いたボタンが設置されていて、ここを左右にスライドさせることで同じ領域内で2枚の画像を比較できるようになっています。ビフォーアフター画像を効率よく快適な操作でユーザーに比較させたい場合に最適な機能ですね。

また、キーボードの左右矢印キーからでもスライドさせることが可能です。

使い方やマークアップもシンプルで分かりやすく簡単に実装できるかと思います。

デモはレスポンシブにも対応しているのでスマホやタブレットなどモバイルからでも操作しやすいのがグッドです。

BeerSlider

関連記事

  1. jQuery Brazzers Carousel Plugin
  2. swipe-menu-js

    JavaScript

    横からスライド・スワイプ表示するハンバーガーメニュー実装「swipe-menu-js」

    swipe-menu-jsは横からスライド・スワイプ表示するシンプルな…

  3. Pilpil

    JavaScript

    プログレッシブ形式で画像表示時間を短縮してくれる「Pilpil」

    Pilpilは、ページの画像表示の時間を短縮するためのJSライブラリで…

  4. no-image

    JavaScript

    ウィークデイ(週)のオプションを作成できる「jquery-weekdays」

    jquery-weekdaysはウィークデイ(週)のオプションを作成で…

  5. jQuery Bar Rating

    JavaScript

    選択範囲を評価ウィジェットに変換できる「jQuery Bar Rating」

    jQuery Bar Ratingは、ユーザーが選択する範囲を評価ウィ…

  6. no-image

    JavaScript

    かっこいいニュース・バナースライドショー実装「jQuery News Slider」

    jQuery News Sliderは、かっこいいニュース・バナースラ…

最近の記事

  1. Anker PowerWave 10 Pad & Stand セット
  2. ミノン メン 薬用全身シャンプー

アーカイブ

PAGE TOP