jQuery

【Javascript】オーディオ対応のCSS3ベースのスライダーASlider

September 29, 2018
A-Slider

ASliderはオーディオ対応のCSS3ベースのスライダー。同じページに複数のスライダをサポート、画像だけでなく、コンテンツをスライドさせる、スライドごとにオプションのオーディオを指定、スライドごとにスライドの間隔を個別に指定することができます。

Usage

<div class="aslider">
    <div class="aslide" data-duration="12">
        <img src="animage.jpg" alt="an image" />
    </div>
    <div class="aslide" data-duration="22" data-audio="avideo.mp3" data-audio-loop>
        <h1>This slide has text and a video</h1>
        <video src="avideo.flv" />
    </div>
</div>

Configuration options

asliderクラスの要素に適用

  1. data-hide-controls
  2. data-hide-mute
  3. data-hide-pause

各スライド

  1. data-duration="
  2. data-audio=""
  3. data-audio-loop