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