Fotorama - 如何增加缩略图之间的间距

Question

我需要增加缩略图之间的间距。我该怎么做？

我只有5张图片，看起来很有趣，所有的拇指都聚集在中央。

很多人。

Answer 1

只需使用thumbmargin选项：

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

http://fotorama.io/customize/options/#thumbmargin

Answer 2

在我正在处理的网站中，我通过向下面的选择器添加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;
}

希望这可以帮助你;）