Начните миниатюры слева от слайд-шоу вместо середины

Question

В плагине Fotorama, если изображений мало, миниатюры начинаются с центра. Я хочу, чтобы миниатюры начинались слева. Как я могу это сделать?

Answer 1

Чтобы запустить миниатюры слева или справа, просто добавьте код CSS:

.fotorama__nav
{
  text-align: left; /*for left*/
}

.fotorama__nav
{
  text-align: right; /*for right*/
}

Answer 2

Это просто. Плагин fotorama использует свойство трансформации css3 для выравнивания миниатюр под основным изображением. просто вычислите родительскую ширину и ширину дочернего контейнера с помощью jQuery, и если родительский элемент шире дочернего контейнера, выполните преобразование по оси X, чтобы сместить все миниатюры влево.

$(document).ready(function() {
    var pw = $('.fotorama__nav--thumbs').innerWidth();
    var cw = $('.fotorama__nav__shaft').innerWidth();
    var offset = pw -cw;
    var negOffset = (-1 * (pw -cw)) / 2;
    var totalOffset = negOffset + 'px';
    if (pw > cw) {
      $('.fotorama__nav__shaft').css('transform', 'translate3d(' + totalOffset + ', 0, 0)');
    }
});