Javascript
【Javascript】レスポンシブ対応のビフォーアフタースライダーBeer Slider
September 24, 2018

Beer Sliderは軽量のバニラJavaScriptプラグイン。2つの異なる瞬間に撮影された画像を比較することができます。
BeerSlider.js
とBeerSlider.css
をインクルード。
<head> ... <link rel="stylesheet" href="dist/BeerSlider.css"> </head> <body> <!-- Bottom of body --> <script src="dist/BeerSlider.js"></script> <script> new BeerSlider(document.getElementById('slider')); </script> </body>
CDNを使用
<head> ... <link rel="stylesheet" href="https://unpkg.com/beerslider/dist/BeerSlider.css"> </head> <body> <!-- Bottom of body --> <script src="https://unpkg.com/beerslider/dist/BeerSlider.js"></script> <script> new BeerSlider(document.getElementById('slider')); </script> </body>
マークアップ
<div id="slider" class="beer-slider" data-beer-label="before"> <img src="../demo-assets/images/dogs-before.jpg" alt=""> <div class="beer-reveal" data-beer-label="after"> <img src="../demo-assets/images/dogs-after.jpg" alt=""> </div> </div>
スライダーをアクティブにする
new BeerSlider(document.getElementById('slider'));
使用できるオプション
{ // start value start: '50', // prefix prefix: 'beer' }
MIT