将fotorama缩略图对齐到左侧

Question

之前已经问过这个问题：Start the thumbnails from the left of the slideshow instead of the middle，但还没有答案。

我正在尝试让缩略图栏位于底部，以便在加载fotorama时将缩略图对齐到左侧。默认情况下，它居中。

Answer 1

我在这里回答Start the thumbnails from the left of the slideshow instead of the middle，这很简单。 fotorama插件使用css3 transform属性来对齐主图像下的缩略图。只需使用jQuery计算父宽度和子容器宽度，如果父元素宽于子容器，则在X轴上进行变换，将所有缩略图移到左侧。

修改 我做了一个编辑，当你点击箭头或缩略图时，它也会进行对齐修复！

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

Answer 2

只需添加CSS代码：

.fotorama__nav {
    text-align: left or right !important;
}

Answer 3

我刚刚设置了

.fotorama__nav__shaft {
  display: block;
}