DEMO

HTML

		<div class="out">

 <img src="画像1">

 <div class="in">
	 
  <label><input type=radio name="slide" checked><span></span>
   <a href="リンク1">
    <img src="画像1">
   </a>
  </label>
	 
  <label><input type=radio name="slide"><span></span>
   <a href="リンク2">
    <img src="画像2">
   </a>
  </label>
	 
  <label><input type=radio name="slide"><span></span>
   <a href="リンク3">
    <img src="画像3">
   </a>
   </label>
	 
 </div>
</div>

		

HTML説明

画像の設定方法
「画像1～3（3.9.15.21行目）」のテキストを画像URLに書き換えてください。
画像1は2か所あるので同じURLを入れてください。
上記のDEMOは（横）580px（縦）250pxの画像をスライドさせています。

リンクの設定方法
「リンク1～3（8.14.20行目）」のテキストをリンクさせたいURLに書き換えてください。
こちらのコードは画像ごとにリンクを設定可能です。

スライドの数を変えたい場合
<label>～</label>までが1つのスライドなので、その記述を増減させてください。
▮減らしたい場合
<label>～</label>までの記述を削除してください。
仮に3枚目を削除の場合19~23行目までを削除するという形です。
▮増やしたい場合
<label>～</label>までの記述をコピー&ペーストで増やしてください。
記述の上から順にスライドするため、設定したいスライド順の箇所に追加してください。

注意ポイント
HTMLを書き換える際は該当するテキストのみを書き換えたり、複製するようにしてください。
画像やリンクの場合は特に前後の「""」は間違えて消してしまいやすい箇所なのでご注意ください。
スライドを複製する際も「」のような記述が抜けるだけで崩れる可能性があるのでご注意ください。

CSS

		<style>
.out{
    position: relative;
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
}
.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;
    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;
}
</style>


		

CSS説明

アニメーション時間の変更方法
「.3s（13行目）」のテキストを書き換えてください。
現在は0.3秒で切り替わる設定になっています。任意の秒数を指定してください。

横幅の変更方法
「580px（5行目）」を設定した画像サイズに書き換えてください。

クリック部分「〇」のサイズ変更方法
「15px（29.30行目）」を書き換えてください。
両方同じサイズを入力してください。数字が大きくなるほど〇も大きくなります。