CSS
【CSS】フェードエフェクト付きのスライドショーCSS Fadeshow
February 17, 2017

CSS FadeshowはCSSのみ作成されたフェードエフェクト(フェード効果付きのスライドショー)。スライドショーはSCSSで構築されており、カスタマイズとサイトへの容易な適応が可能。
<div data-am-fadeshow="quick-nav prev-next-nav slide-counter autoplay ken-burns"> <!-- Radio --> <input type="radio" name="css-fadeshow" id="slide-1" /> <input type="radio" name="css-fadeshow" id="slide-2" /> <input type="radio" name="css-fadeshow" id="slide-3" /> <!-- Slides --> <div class="fs-slides"> <div class="fs-slide"> <div class="fs-slide-bg" style="background-image: url();"></div> <!-- Other content goes here... --> </div> <div class="fs-slide"> <div class="fs-slide-bg" style="background-image: url();"></div> <!-- Other content goes here... --> </div> <div class="fs-slide"> <div class="fs-slide-bg" style="background-image: url();"></div> <!-- Other content goes here... --> </div> </div> <!-- Quick Navigation --> <div class="fs-quick-nav"> <label class="fs-quick-btn" for="slide-1"></label> <label class="fs-quick-btn" for="slide-2"></label> <label class="fs-quick-btn" for="slide-3"></label> </div> <!-- Prev Navigation --> <div class="fs-prev-nav"> <label class="fs-prev-btn" for="slide-1"></label> <label class="fs-prev-btn" for="slide-2"></label> <label class="fs-prev-btn" for="slide-3"></label> </div> <!-- Next Navigation --> <div class="fs-next-nav"> <label class="fs-next-btn" for="slide-1"></label> <label class="fs-next-btn" for="slide-2"></label> <label class="fs-next-btn" for="slide-3"></label> </div> <!-- Slide Counter (only one required) --> <div class="fs-slide-counter"> <span class="fs-slide-counter-current"></span>/<span class="fs-slide-counter-total"></span> </div> </div>
quick-nav
<div data-am-fadeshow="quick-nav"></div>
prev-next-nav
<div data-am-fadeshow="prev-next-nav"></div>
slide-counter
<div data-am-fadeshow="slide-counter"></div>
autoplay
<div data-am-fadeshow="autoplay"></div>
headタグにCSSを追加
<link rel="stylesheet" href="YOUR_PATH/css-fadeshow.min.css">
MIT