「サムネイルスライドショー」ブロックについて
<!--▼▼▼▼▼ここから「横サムネイルスライドショー」--> <section class="slide-thumbnail-box"> <div class="slide-thumbnail1"> <div class="img rtl"> <div><a href="#"><img src="images/1.jpg" alt=""></a></div> <div><a href="#"><img src="images/2.jpg" alt=""></a></div> <div><a href="#"><img src="images/3.jpg" alt=""></a></div> <div><a href="#"><img src="images/4.jpg" alt=""></a></div> </div> </div> <div class="slide-thumbnail1"> <div class="img ltr"> <div><a href="#"><img src="images/1.jpg" alt=""></a></div> <div><a href="#"><img src="images/2.jpg" alt=""></a></div> <div><a href="#"><img src="images/3.jpg" alt=""></a></div> <div><a href="#"><img src="images/4.jpg" alt=""></a></div> </div> </div> </section> <!--▲▲▲▲▲ここまで「横サムネイルスライドショー」-->
ご使用上の注意点
画像(img)は必ず「4枚以上」の「偶数」で配置して下さい。それ以外だと途中で表示が崩れる場合があります。
主なスタイルは
cssフォルダのstyle.cssから「slide-thumbnail-box」でテキスト検索してみて下さい。詳しい解説もあります。
右から左へ移動するスタイル
<div class="img rtl">
左から右へ移動するスタイル
<div class="img ltr">
画像の段違いレイアウト
以下の赤文字部分で調整できます。もし全て並べて表示させたいならこのブロックごと削除すればOK。
/*偶数番目の画像の垂直位置を少しずらす。垂直位置を並べたいならこのブロックを削除。*/
.slide-thumbnail1 .img div:nth-of-type(even) {
transform: translateY(3vw);
}