スマホの操作も快適な優れもの！ビフォーアフター画像のスライダーを実装するJavaScriptライブラリ -Beer Slider
スマホ、タブレット、デスクトップのレスポンシブに完全対応、マウス操作・キーボード操作・タッチ操作にも完全対応のアクセシブルなスライダーを実装するスクリプトを紹介します。 他スクリプトへの依存は一切なく、単体で動作し、jQueryのプラグインとして実装することも可能です。 Beer Slider Responsive & Accessible Before-After Slider Beer Slider -GitHub Beer Sliderの特徴 Beer Sliderのデモ Beer Sliderの使い方 Beer Sliderの特徴 Beer Sliderは2枚の画像を使用して、ビフォーとアフターを表示できるスライダーです。 単体で動作するシンプルなスクリプト vanilla JavaScriptで記述されたスライダー。他スクリプトへの依存はありません。 jQuery, Zeptoに
スワイプでBefore/Afterを表現するスライダー「Beer Slider」
WEB上では限定的な使い方にはなってしまいますが、フィルターのON/OFF・背景のモノクロとカラー、化粧の有り無しなど、全く同じもので異なる状況を比べるというときに便利なのが、今回紹介するスワイプでBefore/Afterを表現するスライダー「Beer Slider」です。 上記のように左右で写真が表示されて、スワイプまたはスライドで写真の表示領域を切り替えることが可能です。 詳しくは以下 ソースは比較的シンプルで、普段からWEB制作をしたことがある方であれば、問題なく実装できるレベルだと思います。実際のデモやコードのサンプルは「Beer Slider Responsive & Accessible Before-After Slider – Demo – PEPSized」からご覧いただけます。 ソース自体は「GitHub – pehaa/beerslider: A vanilla JS
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
