Ползунок Cycle2 не может анимировать процентную ширину?

Я работаю над сайтом, который будет реагировать. Я пытаюсь реализовать слайдер с содержимым внутри него, и я использую Cycle2 для его простоты.

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

По сути, у меня есть одна фотография, ширина которой: 100% от нее, а еще две - 50% их контейнера и сидят бок о бок. Вы можете увидеть все это на демо-странице, которую я сделал. Но есть также codepen (хотя это сложнее увидеть здесь, но код тот же).

Проблема в том, что для циклического цикла Cycle2, похоже, играет с шириной контейнера. Это означает, что все мои изображения также затронуты, поскольку они основаны на процентной ширине. Если вы нажмете "Далее", вы увидите, что анимация выглядит странно, поскольку перед ее исчезновением изображения оживляют разные размеры. Я хочу, чтобы все оставалось неизменным, но просто прокручивалось.

Мне просто интересно, какими будут ваши решения для этого, я бы предпочел использовать Cycle2, поскольку я знаю, что это хорошо и легко в стиле, но, возможно, это невозможно. Или как еще вы могли бы работать в этом случае с адаптивным дизайном?

<div data-cycle-fx="scrollHorz" data-cycle-pause-on-hover="false" data-cycle-speed="400" data-cycle-timeout="0" data-cycle-slides="> div.slideItem" data-cycle-prev="#prev" data-cycle-next="#next" data-cycle-auto-height="true"> </div>
1 ответ

Это было решено путем добавления width:100% к .slideItem

http://codepen.io/anon/pen/rgxka

licensed under cc by-sa 3.0 with attribution.