fotorama - 从幻灯片的左侧而不是中间开始缩略图

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)');
    }
});