Javascript
【Javascript】レスポンシブ対応のビフォーアフタースライダーBeer Slider
September 24, 2018
Beer Sliderは軽量のバニラJavaScriptプラグイン。2つの異なる瞬間に撮影された画像を比較することができます。
Installation
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>
Usage
マークアップ
<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'));
Customization
使用できるオプション
{
// start value
start: '50',
// prefix
prefix: 'beer'
}
MIT
