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