「サムネイルスライドショー」ブロックについて

<!--▼▼▼▼▼ここから「横サムネイルスライドショー」-->
<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);
}