コピペで簡単！超シンプルスライドショー［HTML / CSS / jQuery］
posted : 2018.09.16
こんにちは、ma-ya’s CREATE［まーやずくりえいと］です。
長く親しまれているWEBサイト上のスライドショー。
色々なプラグインが開発されて、中には超多機能なものもあります。
ただ、超個人的な話をすると、スライドショーはシンプルで良いと思ってます。
ぶっちゃけ、全てのスライドをじっくり1枚ずつめくりながら見るユーザー・見せるべきケースってそこまで多くないんじゃないか？？て思うんですよねえ。。
中にはここスライドショーじゃなくてもいいんじゃない？と感じる事さえあるので、いっそ本当にプレーンなスライドショーサンプルを作ってみました。
ページ送りも付いていない、一定間隔でスライドを繰り返すだけの超絶シンプル仕様です。
See the Pen Extreme plain slideshow by mycreatesite (@mycreatesite) on CodePen.
うーん潔い。
とってもミニマルで好きですこういうの。
そして何よりコードが短くて済むという笑
ちょろっとコード説明です。
HTML（初期表示imgに表示用クラス「showSlide」を付与）
<ul id="slideshow" class="slideshow">
<li class="showSlide"><img src="http://myscreate.com/wp-content/uploads/2018/09/slide1.jpg"></li>
<li><img src="http://myscreate.com/wp-content/uploads/2018/09/slide2.jpg"></li>
<li><img src="http://myscreate.com/wp-content/uploads/2018/09/slide3.jpg"></li>
</ul>
CSS（スライドショー部分のみ抜粋）
.slideshow {
width: 50%; /* スライドショー幅（PC）*/
list-style-type: none;
position: relative;
}
.slideshow > li {
opacity: 0;
position: absolute;
transition: opacity 3s ease-in-out; /*フェード時間・イージング*/
}
.slideshow > li.showSlide{
opacity: 1;
}
.slideshow > li > img {
width : 100%;
height: auto;
}
/* SP用メディアクエリ */
@media screen and (max-width:600px){
.slideshow{
width: 100%; /* スライドショー幅（SP）*/
}
}
JS（スライド切替のみ実装）
$(function(){
var imgs = $("#slideshow > li");
var imgLen = imgs.length;
var count = 0;
function changeImg(){
//スライド切替のポイント（配列を順番に処理し終わったら配列の先頭に戻る計算式）
count = (count + 1) % imgLen;
imgs.removeClass("showSlide").eq(count).addClass("showSlide");
}
setInterval(changeImg, 5000); //切替の間隔（ミリ秒）
})
ポイントは配列を順番に処理し終わったら配列の先頭に戻る計算式
count = (count + 1) % imgLen;
でしょうか。この式を知った時はなるほど！と思いました。
数学出来る人ってスゴイと感心したものです。
とても、というかかなり、いやむしろ超絶プレーンなスライドショーなので、少しカスタマイズして使ってもよし、潔くプレーンさを押し出すもよし、もっと多機能なプラグイン等を使うもよし（泣）な感じです。
このサイトではプラグイン使ってますけどね苦笑
どなたかの参考になればこれ幸い。
