css - 将 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 变换属性在主图像下对齐缩略图。只需使用 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)');
      }
    });
  });