Javascript

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

September 24, 2018
Beer Slider

Beer Sliderは軽量のバニラJavaScriptプラグイン。2つの異なる瞬間に撮影された画像を比較することができます。

Installation

BeerSlider.jsBeerSlider.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