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

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

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

Большое спасибо.


fotorama
person Anne Viljoen    schedule 11.09.2013    source источник
comment
Мне это понравилось stackoverflow.com/a/56128275/8251894 Вам просто нужно добавить поле большого пальца в app/design/frontend/Vendor /Theme/Magento_Catalog/templates/product/view/gallery.phtml   -  person Nguyen Duy Thanh    schedule 14.05.2019

Ответы (2)


arrow_upward
5
arrow_downward

Просто используйте опцию 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

person Art    schedule 21.09.2013

arrow_upward
1
arrow_downward

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

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

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

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

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

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

Надеюсь, это поможет вам ;)

person mr_reamer    schedule 19.09.2013