将fotorama缩略图对齐到左侧

Posted 2021-04-07

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

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

答案

我在这里回答，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)');
      }
    });
  });

另一答案

只需添加到CSS代码：

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

另一答案

我刚刚开始

.fotorama__nav__shaft {
  display: block;
}