Я пытаюсь использовать 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
Спасибо за помощь.
Похоже, что этот плагин-циклытель не очень стабилен, и поддержка на нем далека от отличной. Я в конечном итоге использовал этот другой плагин под названием Cycle2, который является более популярным и настраиваемым.
Cycle2 поставляется со многими причудливыми переходами, но не стесняйтесь проверять цикл для других более традиционных переходов.
EDIT: Что касается looper.js, решение должно было указать height
.looper.looper-inner
для каждого отдельного класса анимации, который вы используете (по умолчанию 100%).