演習「スライダー」
01 全画面スライドショー
フォトアルバムに使用する写真を「PIXABAY」などからダウンロード。
名前をつけて「img」フォルダーへ入れる。
※ダウンロードサイズ／width 1200pxぐらい
※写真の枚数／3枚ぐらい
※写真の名前は下記と同じにするとcssを変更しなくて済みます
ph01.jpg、ph02.jpg、ph03.jpg
HTML
<div class="wrapper">
<a class="button" href="index.html">ENTER</a>
<ul class="slider">
<li class="slider-ph slider01"></li>
<li class="slider-ph slider02"></li>
<li class="slider-ph slider03"></li>
</ul>
</div>
02 中央に画像を表示させるスライドショー
使用する写真を「PIXABAY」などからダウンロード。
名前をつけて「img」フォルダーへ入れる。
※ダウンロードサイズ／width 640pxぐらい 高さをそろえる
※写真の枚数／4枚ぐらい
※写真の名前は下記と同じにするとcssを変更しなくて済みます
img_01.jpg、img_02.jpg、img_03.jpg、img_04.jpg
HTML
<ul class="slider">
<li><img src="img/img_01.jpg" alt=""></li>
<li><img src="img/img_02.jpg" alt=""></li>
<li><img src="img/img_03.jpg" alt=""></li>
<li><img src="img/img_04.jpg" alt=""></li>
</ul>
03 ループスライドショー
写真を「PIXABAY」などからダウンロード。
名前をつけて「img」フォルダーへ入れる。
※ダウンロードサイズ／width 400pxぐらい
※写真の枚数／5枚ぐらい～
※写真の名前は下記と同じにするとcssを変更しなくて済みます
ph01.jpg、ph02.jpg、ph03.jpg、ph04.jpg、ph05.jpg
HTML
<ul class="slider">
<li><img src="img/img_01.jpg" alt=""></li>
<li><img src="img/img_02.jpg" alt=""></li>
<li><img src="img/img_03.jpg" alt=""></li>
<li><img src="img/img_04.jpg" alt=""></li>
<li><img src="img/img_05.jpg" alt=""></li>
</ul>
07 画像解像度の確認
最後にもう一度、画像解像度（image resolution）をチェックしてください
