CSSスライドショー

JSを一切使わない、フェードアニメーションによるスライドショーを作成しました。

使用言語

HTML
CSS(時短のためSCSSを使用、CSSでもできます。)

完成系です。いろいろと見た目もつけてます。

See the Pen xxxomJO by k1-web (@k1-web) on CodePen.

内容の解説

まずはHTMLでスライドショーのDOMから。

slideshow.html

<divclass="slideshow"><inputtype="radio"name="slideshow"id="s-1"checked><inputtype="radio"name="slideshow"id="s-2"><inputtype="radio"name="slideshow"id="s-3"><inputtype="radio"name="slideshow"id="s-4"><inputtype="radio"name="slideshow"id="s-5"><ulclass="slideshow_list"><liclass="item-1"style="background:#ff7f7f;"></li><liclass="item-2"style="background:#bf7fff;"></li><liclass="item-3"style="background:#7fffff;"></li><liclass="item-4"style="background:#7fff7f;"></li><liclass="item-5"style="background:#ffbf7f;"></li></ul><divclass="slideshow_label"><labelfor="s-1"></label><labelfor="s-2"></label><labelfor="s-3"></label><labelfor="s-4"></label><labelfor="s-5"></label></div><divclass="slideshow_page"><labelfor="s-1"></label><labelfor="s-2"></label><labelfor="s-3"></label><labelfor="s-4"></label><labelfor="s-5"></label></div></div>

HTMLですが、PHPとかPugとかで個数分forなどで回すと簡単に制御できます。
例えば、PHPでやるとすると下記のように枚数を簡単に制御できます。

slideshow.php

<?php$slideNum=5;?><divclass="slideshow"><?phpfor($i=1;$i<=$slideNum;$i++):?><inputtype="radio"name="slideshow"id="s-<?phpecho$i;?>"<?phpecho$i=='1'?' checked':'';?>><?phpendfor;?><ulclass="slideshow_list"><?phpfor($i=1;$i<=$slideNum;$i++):?><liclass="item-<?phpecho$i;?>"></li><?phpendfor;?></ul><divclass="slideshow_label"><?phpfor($i=1;$i<=$slideNum;$i++):?><labelfor="s-<?phpecho$i;?>"></label><?phpendfor;?></div><divclass="slideshow_page"><?phpfor($i=1;$i<=$slideNum;$i++):?><labelfor="s-<?phpecho$i;?>"></label><?phpendfor;?></div></div>

解説-スライド画像の部分

slideshow.html

<ulclass="slideshow_list"><liclass="item-1"style="background:#ff7f7f;"></li><liclass="item-2"style="background:#bf7fff;"></li><liclass="item-3"style="background:#7fffff;"></li><liclass="item-4"style="background:#7fff7f;"></li><liclass="item-5"style="background:#ffbf7f;"></li></ul>

スライドショーの画像とかを入れる部分、スライドの枚数分、

タグを作成。
本来はタグの中に

タグなどをいれますが、今回は画像添付が面倒なので、背景色を指定しているだけです。

解説-タグの部分

slideshow.html

<inputtype="radio"name="slideshow"id="s-1"checked><inputtype="radio"name="slideshow"id="s-2"><inputtype="radio"name="slideshow"id="s-3"><inputtype="radio"name="slideshow"id="s-4"><inputtype="radio"name="slideshow"id="s-5">

スライドショーのうち、どこが今見えている所かを判定するためのラジオボタンになります。
スライドの枚数分を作成し、一番上位の親要素の直下にを指定してください。
CSSセレクタの「~」という、隣接する要素を指定できるセレクタを使用するので、
スライドの

タグや、タグの親要素がタグに隣接していないとスタイルをあてられません。

また、見た目上には非表示にしていますが、要素で選択し、2番目の画像なら2番目にチェックみたいな感じで動作しています。

解説-左右の矢印ボタンとぺジテーション

slideshow.html

<divclass="slideshow_label"><labelfor="s-1"></label><labelfor="s-2"></label><labelfor="s-3"></label><labelfor="s-4"></label><labelfor="s-5"></label></div><divclass="slideshow_page"><labelfor="s-1"></label><labelfor="s-2"></label><labelfor="s-3"></label><labelfor="s-4"></label><labelfor="s-5"></label></div>

先程のラジオボタンに対応するラベルです。2つ存在しても同じ#s-Nのラジオボタンに対応しています。
今回は.slideshow_labelの中のタグは進む・戻るボタンとして、.slideshow_pageはぺジテーションとして動作します。

本題のCSS(SCSS)です

codepenから説明に必要部分だけ抜粋しています。

slideshow.scss

@mixinslideLength($length,$show){$page:ceil($length/$show);content:$page;@for$ifrom1through$page{&:nth-of-type(#{$i}):checked{&~.slideshow_list{>li:nth-of-type(n+#{$i*$show-$show+1}):nth-of-type(-n+#{$i*$show}){opacity:1;z-index:10;> a::before{z-index:11;}}}&~.slideshow_label{$prev:$i-1;$next:$i+1;@if$prev<1{$prev:$prev+$page;}@if$next>$page{$next:$next-$page;}>label:nth-of-type(#{$prev}){display:block;right:auto;&::before{right:auto;-webkit-transform:rotate(45deg);transform:rotate(45deg);}}>label:nth-of-type(#{$next}){display:block;left:auto;&::before{left:auto;-webkit-transform:rotate(-135deg);transform:rotate(-135deg);}}}&~.slideshow_page{>label:nth-of-type(#{$i})::before{content:'';}}}}}.slideshow{position:relative;input[type="radio"]{display:none;opacity:0;width:0;height:0;margin:0;padding:0;$length:5;//合計の枚数$show:1;//1ページあたりに見せる数@includeslideLength($length,$show);}.slideshow_list{>li{display:block;width:300px;height:150px;//~~opacity:0;-webkit-transition:opacity0.3sease-in-out;transition:opacity0.3sease-in-out;}}.slideshow_label{>label{display:none;width:40px;height:40px;background-color:#fff;border:1pxsolid#f30;border-radius:50%;cursor:pointer;position:absolute;top:52px;left:20px;right:20px;}}.slideshow_page{>label{display:inline-block;width:10px;height:10px;background-color:#a8b7c6;border-radius:50%;cursor:pointer;position:relative;&::before{display:inline-block;width:10px;height:10px;background-color:#777;cursor:pointer;position:relative;border-radius:50%;position:absolute;top:0;left:0;}}}}

解説-スライド画像の部分

slideshow.scss

.slideshow_list{>li{display:block;width:300px;height:150px;//~~opacity:0;-webkit-transition:opacity0.3sease-in-out;transition:opacity0.3sease-in-out;}}

opacityを0にしていて、transitionでopacityの透過をアニメーションにしています。
後ほど解説するラジオボタンのチェックを判定してopacityを1にしています。

解説-inputタグの部分

slideshow.scss

@mixinslideLength($length,$show){$page:ceil($length/$show);content:$page;@for$ifrom1through$page{&:nth-of-type(#{$i}):checked{&~.slideshow_list{>li:nth-of-type(n+#{$i*$show-$show+1}):nth-of-type(-n+#{$i*$show}){opacity:1;z-index:10;> a::before{z-index:11;}}}&~.slideshow_label{$prev:$i-1;$next:$i+1;@if$prev<1{$prev:$prev+$page;}@if$next>$page{$next:$next-$page;}>label:nth-of-type(#{$prev}){display:block;right:auto;&::before{right:auto;-webkit-transform:rotate(45deg);transform:rotate(45deg);}}>label:nth-of-type(#{$next}){display:block;left:auto;&::before{left:auto;-webkit-transform:rotate(-135deg);transform:rotate(-135deg);}}}&~.slideshow_page{>label:nth-of-type(#{$i})::before{content:'';}}}}}.slideshow{input[type="radio"]{display:none;opacity:0;width:0;height:0;margin:0;padding:0;$length:5;//合計の枚数$show:1;//1ページあたりに見せる数@includeslideLength($length,$show);}}

input:nth-of-type(1)がチェック付いた時には、.slideshow_list > li:nth-of-type(1)をopacity: 1;にして表示、
input:nth-of-type(2)がチェック付いた時には、.slideshow_list > li:nth-of-type(2)をopacity: 1;にして表示...
のようにラジオボタンでnth-of-typeを利用し、何番目にチェックついたら何番目のスタイルを変更するという動作にしています。

左右の矢印部分は、input:nth-of-type(2)だったら.slideshow_label>label:nth-of-type(1)を戻るボタンとして表示、
.slideshow_label>label:nth-of-type(3)を進むボタンとして表示、というようにチェックした数値の前後を表示としています。

ぺジテーションはそれぞれに対応したラベルに対してチェックを付けるようになっています。

SCSSの場合は上記らを自動的に計算できるので、関数化して「$length」に応じた枚数分スライドできるようになっています。