Start the thumbnails from the left of the slideshow instead of the middle

Question

In the Fotorama plugin, if there are few images then the thumbnails start from the center. I want the thumbnails to start from the left. How can I do this?

Answer 1

To start the thumbnails from left or right, just add the CSS code:

.fotorama__nav
{
  text-align: left; /*for left*/
}

.fotorama__nav
{
  text-align: right; /*for right*/
}

Answer 2

It is simple. The fotorama plugin uses css3 transform property to align thumbnails under the main image. just calculate the parent width and children container width using jQuery and if the parent is wider than children container, make a transform across X axis to shift all thumbnails to the left.

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