no-image

JavaScript

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

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

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

デモ

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

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

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

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

BeerSlider

関連記事

  1. Section Scroller

    JavaScript

    セクションごとに自動でスクロールしてくれるボタン実装「Section Scroller」

    Section Scrollerは、セクションごとにスムーズにスクロー…

  2. Material ScrollTop Button
  3. no-image

    JavaScript

    シンプルでスタイリッシュなjQueryスライダー「Simple slider」

    Simple sliderはシンプルでスタイリッシュなスライダー(カル…

  4. JavaScript

    カスタマイズも自由にできるjQuery「bxSlider」の使い方

    個人的にかなりよさげなjQueryスライダーを使ってみました。その名も…

  5. no-image

    JavaScript

    jQueryとCSS3を使った縦型アコーディオン「Accordion-menu」

    Accordion-menuは、jQueryとCSS3を使ったシンプル…

最近の記事

  1. 田沢湖
  2. ハクバ シリコンクロス
  3. トライポッドスリーブ
  4. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ

Instagram始めました

Facebookページ

PAGE TOP