Question: This question has been asked before: [Start the thumbnails from the left of the slideshow instead of the middle](https://stackoverflow.com/q/30867297/4220943), but there's no answer yet.

I'm trying to get the thumbnail bar at the bottom to align the thumbnails to the left when fotorama is loaded. By default, it's centered.

Answer: 
As I answered it here, [Start the thumbnails from the left of the slideshow instead of the middle](https://stackoverflow.com/questions/30867297/start-the-thumbnails-from-the-left-of-the-sldieshow-instead-of-middle-of-the-sli/33062159#33062159), 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.

**EDIT:**
I made an edit that when you click on on arrows or thumbnails, it also does the alignment fix!

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

```
Just add to CSS that code: 

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

```