fotorama - Fotorama - サムネイル間の間隔を広げる方法

Question

サムネイル間の間隔を広げる必要があります。どうすればいいですか？

画像は 5 枚しかありませんが、中央に親指が集まっているのがおかしいです。

多くの感謝。

score 5 · Accepted Answer

thumbmarginオプションを使用するだけです：

<div class="fotorama"
     data-nav="thumbs"
     data-thumbmargin="10">
  <img src="1.jpg">
  <img src="2.jpg">
</div>

score 1 · Accepted Answer

私が取り組んでいるサイトでは、以下のセレクターに margin-right 値を追加することでそれを行いました:

.fotorama__nav--thumbs .fotorama__nav__frame {
padding-left: 0!important;
margin-right: 14px;
}

明らかに、この値を自分に合ったものに修正できます。

このアプローチの問題は、現在選択されているサムネイルを示す青い境界線のアニメーションが fotorama JS ファイル内の CSS3 で設定されていることです。余白が増えたため、これをアニメーション化することができませんでした。

私の解決策は、アニメーションをやめて、青い境界線を維持する次の行を追加することでした:

.fotorama__nav__frame.fotorama__active div{ 
    width: 60px; height: 60px; border: solid 2px #00afea;
}

これがお役に立てば幸いです;）

2 に答える 2