Есть ли близкий аналог слайдера Fotorama?

Question

[Лучник *range attack +10*]

Фоторама — слайдер (fotorama.io).
По некоторым причинам нужно найти ему альтернативу.
Слайдеров много, поэтому читать про каждый и тестировать нет времени. Нужен именно аналог Фоторамы.

Что ищу:

• Возможность размещать html контент в слайдах
  
• Простой html код
  
• Настройка параметров слайдера прямо внутри html кода
  
  Пример:
  
  

  <div class="fotorama"
       data-width="100%"
       data-ratio="800/600">
  </div>

  
  
• Возможность растянуть слайдер на всю ширину окна, но при этом слайды должны уменьшаться/увеличиваться пропорционально.
  
• Должен быть бесплатным. Лицензия должна разрешать использование в коммерческих проектах.
  

Answer 1

[Евгений Шев]

Что-то мне кажется, что это вы чего-то намудрили. fotorama.io — там всё и увеличивается и уменьшается при изменении размеров окна без задержек и обновлений (Safari 8).

UPD:

Comments

[Лучник *range attack +10*]

Вроде извращений никаких со слайдером не делал. Уже не знаю с какой строны подбираться к этому вопросу. Проблема тут: proton-impuls.esy.es

[Евгений Шев]

Константин Рафиков: искать проблему скрупулезно, увы, времени сейчас нет, но пересмотрите стили. Например, у вас к враперу применяется стиль display: table, что само по себе не очень хорошо, но самое главное, что применяется этот стиль и к слайдеру, что вообще не хорошо. Попробуйте фотораму разместить внутри этого врапера с display: table.

[Евгений Шев]

А вообще, Константин Рафиков, экспериментируйте. Первым делом попробуйте вынести фотораму (без дом.стилей) за пределы блоков, сразу перед закрытием body.

[Лучник *range attack +10*]

Евгений Шев: у врапера display: table из-за того, что внутри блоки с float. Пробовал и так, не помогло. А почему display: table лучше не применять к оберткам?

[Евгений Шев]

Константин Рафиков: а зачем этот врапер к самой фотораме применяете? Внутри нее тоже есть float? Его там быть не должно. Делайте обертку фотограмы релативом, а внутри позиционируете абсолютно.

[Евгений Шев]

Константин Рафиков: не знаю как вы пробовали, но я сейчас в файербаге убрал wrapper из блока с фоторамой и всё стало гуд ;)

[Лучник *range attack +10*]

Евгений Шев: спасибо, помогло. Убрал класс wrapper применительно к Фотораме. Странно, потому что я до этого так делал, видимо тогда намудрил с чем-то другим.

Answer 2

[Назар Мокринский]

Я думаю, вопрос нужно начинать с причин по которым Fotorama не подходит, очевидно же что нет смысла писать копию какого-то плагина с нуля.

Comments

[Назар Мокринский]

Константин Рафиков: А разработчику написать религия не позволяет?

[Лучник *range attack +10*]

А я и не прошу написать что-то с нуля. Фоторама — не единственный слайдер на планете Земля. Может есть аналог.

[Лучник *range attack +10*]

Причина. Сейчас ширина слайдера — 100% ширины окна. Фоторама «запаздывает» когда меняю размеры окна. Например, расширяю окно — все хорошо, слайдер тянется за окном. Сужаю — не сужается обратно, пока не обновлю страницу. Тогда слайдер принимает нужный размер.

[Лучник *range attack +10*]

Назар Мокринский: Разработчику писал, жду ответ, а сроки поджимают.

[Назар Мокринский]

Константин Рафиков: Тогда есть проверенный способ - потратить время на полезное дело - найти причину бага, исправить, заодно отправить разработчику pull request.
Заодно посмотрите на сайте разработчика демку, может это вы что-то наковыряли, что привело к багу.

[Лучник *range attack +10*]

Назар Мокринский: Я плохо разбираюсь в jQuery. Вряд ли найду причину бага.

[Назар Мокринский]

Константин Рафиков: Тогда грустно, конечно.

[Лучник *range attack +10*]

Назар Мокринский: Да, печаль и безысходность.

Answer 3

[Александр N++]

Повести событие onresize

var $fotoramaDiv = $('#fotorama').fotorama();
$(window).on('resize', function(e){
    // 2. Get the API object.
    var fotorama = $fotoramaDiv.data('fotorama');
          fotorama.resize(); // forse resize
          // OR
          /* 
fotorama.resize({
  width: 333,
  height: 500
}, 1000);
          */
});

Comments

[Лучник *range attack +10*]

Теперь приходится обновлять даже когда увеличиваю ширину окна. Может я неправильно делаю? Просто вставил это в теги script на странице с Фоторамой.

[Александр N++]

Создайте мини демку на jsfiddle.net

Answer 4

[roma_programmer]

Вот аналог dimsemenov.com/plugins/royal-slider/gallery