Как настроить слайдер с помощью слайдера fotorama?

Question

[GreenMan1899]

Нужно чтобы картинка была по своему размеру по центру, а миниатюры распределялись по ширине блока.
data-width задает размеры одновременно для картинки и миниатюр.

Но получается либо картинка по своему размеру и миниатюры по ширине этой картинки, т.е. узкие.
Либо миниатюры по всей ширине как и картинк, т.е. слишком широкая.

Вот так выглядит у меня

<div class="fotorama col-xs-12"
                     
                     data-nav="thumbs"
                     data-allowfullscreen="true"
                     data-loop="true"
                     data-width="90%" 
                     >
                    <img  class="catalog-item-img" src="http://t07.deviantart.net/eTS_zBEgp19qq0gaf37KJzDC0jY=/300x200/filters:fixed_height(100,100):origin()/pre07/ffb6/th/pre/f/2016/060/c/d/door_texture_2_by_tim_dm-d9tjv9i.png" alt="Экономьте деньги">
                    <img  class="catalog-item-img" src="http://t07.deviantart.net/eTS_zBEgp19qq0gaf37KJzDC0jY=/300x200/filters:fixed_height(100,100):origin()/pre07/ffb6/th/pre/f/2016/060/c/d/door_texture_2_by_tim_dm-d9tjv9i.png" alt="Экономьте деньги">
                    <img  class="catalog-item-img" src="http://t07.deviantart.net/eTS_zBEgp19qq0gaf37KJzDC0jY=/300x200/filters:fixed_height(100,100):origin()/pre07/ffb6/th/pre/f/2016/060/c/d/door_texture_2_by_tim_dm-d9tjv9i.png" alt="Экономьте деньги">
                    <img  class="catalog-item-img" src="http://t07.deviantart.net/eTS_zBEgp19qq0gaf37KJzDC0jY=/300x200/filters:fixed_height(100,100):origin()/pre07/ffb6/th/pre/f/2016/060/c/d/door_texture_2_by_tim_dm-d9tjv9i.png" alt="Экономьте деньги">
                    <img  class="catalog-item-img" src="http://t07.deviantart.net/eTS_zBEgp19qq0gaf37KJzDC0jY=/300x200/filters:fixed_height(100,100):origin()/pre07/ffb6/th/pre/f/2016/060/c/d/door_texture_2_by_tim_dm-d9tjv9i.png" alt="Экономьте деньги">
                    <img  class="catalog-item-img" src="http://t07.deviantart.net/eTS_zBEgp19qq0gaf37KJzDC0jY=/300x200/filters:fixed_height(100,100):origin()/pre07/ffb6/th/pre/f/2016/060/c/d/door_texture_2_by_tim_dm-d9tjv9i.png" alt="Экономьте деньги">
                    <img  class="catalog-item-img" src="http://t07.deviantart.net/eTS_zBEgp19qq0gaf37KJzDC0jY=/300x200/filters:fixed_height(100,100):origin()/pre07/ffb6/th/pre/f/2016/060/c/d/door_texture_2_by_tim_dm-d9tjv9i.png" alt="Экономьте деньги">

                </div>

Answer 1

[Ислом Арифжонов]

fotorama.io/customize/thumbnails

Comments

[Ислом Арифжонов]

дайте ширину для тега img миниатюр

[GreenMan1899]

они все равно не выйдут за границы ширины картинки как на фото, что я скинул

[GreenMan1899]

а если обернуть img в блок и задать ему паддинги, тогда миниатюры перестанут работать

[Ислом Арифжонов]

можете дайть ссылку на сайт?

[GreenMan1899]

Ислом Арифжонов: к сожалению не могу. Сейчас фото скину, как выглядит у меня

[Ислом Арифжонов]

тогда покажите код)

[GreenMan1899]

скинул

[Ислом Арифжонов]

ну вот добавьте атрибуты для миниатюр width="144" height="96"

[GreenMan1899]

Ислом Арифжонов: я же писал, что это ничего не дало. Миниатюры все равно распределяются на ширину блока, в которой расположена фоторама. Этот блок у меня 180px. Если я ставлю ширину например 144, то у меня в видимой области остается 1 целая миниатюра и часть другой.
Я могу поставить такую ширину, чтобы в видимой области 3 миниатюры, однако все равно остается проблема с картинкой в слайде ,которая и задает размер фотораме.
Мне нужна оригинальная картикна двери 100х200. И плагин может оставить оригинальный размер картинки, но он применит этот размер (ширину) на весь плагин, влючая блок миниатюр. Т.о образом они будут втиснуты в эти 100 пикселей.
а мне нужно чтобы они были шире картинки, как на фото, что я скинул