向左对齐fotorama缩略图

Question

以前有人问过这个问题:从幻灯片的左边开始显示缩略图，而不是中间，但是还没有答案。

当fotorama加载时，我试图让底部的缩略图栏向左对齐缩略图。默认为居中

Answer 1

正如我在这里回答的那样，从幻灯片的左边开始缩略图，而不是中间，这很简单。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 * 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;
}