Fotorama - как увеличить расстояние между миниатюрами

Question

Мне нужно увеличить расстояние между эскизами. Как мне это сделать?

У меня всего 5 изображений, и это выглядит забавно, когда большие пальцы все сгруппированы по центру.

Many thanx.

Answer 1

На сайте я работаю, я сделал это, добавив маржинальное право значения ниже селектор:

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

Очевидно, что вы можете изменить это значение на то, что вам подходит.

Проблема с этим подходом заключается в том, что синяя рамка, которая указывает, какая миниатюра в данный момент выбрана, имеет свою анимацию, установленную с помощью CSS3 из fotorama JS-файла. Я не смог добиться этого, чтобы оживить его с увеличением поля.

Моего решения было добавить эту строку, которая поддерживает синюю границу, воздерживаясь анимацией:

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

Надеется, что это помогает вам;)

Answer 2

Просто использовать 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