Плагин looper.js - изображения, невидимые между кроссфейдными анимациями

Question

Плагин looper.js - изображения, невидимые между кроссфейдными анимациями

0

Я пытаюсь использовать looper.js для прокрутки различных слов или изображений внутри div (примеры)

Кажется, что все работает нормально, за исключением случаев, когда я использую опцию crossfade animation (class="xfade"). Содержимое отображается только во время анимации и в противном случае невидимо.

Это фиксируется путем комментирования position: relative в .looper.looper-inner:

.looper .looper-inner {
  overflow: hidden;
  width: 100%;
  height: auto;
  /*position: relative;*/
  z-index: 2;
}

НО это не приемлемое решение, так как это испортило мой отзывчивый макет на мобильном телефоне.

Я думаю, это должна быть ошибка noob с моей стороны, поскольку я использую официальные примеры по умолчанию...

ДЕМО: jsfiddle

Спасибо за помощь.

SpidrJeru 19 март 2014, в 22:45

Источник

0

Решение было найдено на странице Gitub Looper : github.com/rygine/looper Надеюсь, это поможет.
user3491096 02 апр. 2014, в 20:06

Теги:

jquery

jquery-plugins

jquery-animate

jquery-cycle

jquery-cycle2

1 ответ

Ещё вопросы

Решение было найдено на странице Gitub Looper : github.com/rygine/looper Надеюсь, это поможет.

SpidrJeru · Answer 1 · 2014-03-22T14-37-00.000Z

Похоже, что этот плагин-циклытель не очень стабилен, и поддержка на нем далека от отличной. Я в конечном итоге использовал этот другой плагин под названием Cycle2, который является более популярным и настраиваемым.

Cycle2 поставляется со многими причудливыми переходами, но не стесняйтесь проверять цикл для других более традиционных переходов.

EDIT: Что касается looper.js, решение должно было указать height .looper.looper-inner для каждого отдельного класса анимации, который вы используете (по умолчанию 100%).