CSSだけで選択ボタン付きスライドショー

CSSだけで自動再生スライドショーの作成方法を掲載しました。
しかし、これはユーザーの意思では選択できないので、CSSだけで選択ボタン付きスライドショーを作成しました。

完成イメージ

特徴

• 中央下部に選択ボタンを表示し、クリックすると画像が切り替わる。
• 画像の追加時の作業は画像の参照先指定のみ。（CSS調整などなし）
• aタグ（画像リンク）あり・なし、どっちでも可
• 自動再生なし

html

<div class="out">
        <img src="1.jpg">
        <div class="in">
            <label><input type=radio name="slide" checked><span></span><a href="#1"><img src="1.jpg"></a></label>
            <label><input type=radio name="slide"><span></span><img src="2.jpg"></label>
            <label><input type=radio name="slide"><span></span><a href="#3"><img src="3.jpg"></a></label>
            <label><input type=radio name="slide"><span></span><a href="#4"><img src="4.jpg"></a></label>
        </div>
    </div>

2行目のimgは高さ確保のためです。高さが決まっていればdivに高さ指定することでこのimgはいらなくなります。

画像を増やすには<label>～</label>をコピペして画像の参照先を指定するだけです。

画像を減らすには<label>～</label>を削除するだけです。

ただし、画像の数は10個がいいところ。
それ以上だとスマホにて選択ボタンが1行に収まらなくなります。

CSS

.out{
    position: relative;
}
.in img{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: .3s;
}
img{
    display: block;
    max-width: 100%;
    height: auto;
}
input{
    display: none;
}
.in{
    display: flex;
    justify-content: center;
}
label span{
    display: block;
    width: 15px;
    height: 15px;
    padding: 7px;
    margin: -40px 0 0;
    border-radius: 100%;
    cursor: pointer;
    position: relative;
    z-index: 2;
}
label span::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #4287f5;
    opacity: 0.5;
    border-radius: 100%;
}

label input:checked + span::before{
    background: #000;
    opacity: 1;
}

label input:checked ~ img,label input:checked ~ a img{
    opacity: 1;
    z-index: 1;
}

まとめ

選択スライドショーはCSSだけでできます。
しかも画像の増減も簡単なので、画像の増減がある場合はこちらがお勧めです。

↓この記事の選択ボタンスライドショーに自動再生もつけたバージョンもあります。

CSSだけで選択ボタン付き自動スライドショー

以上、CSSだけで選択ボタン付きスライドショーを作成する方法でした。