I'm working on a site that will be responsive. I'm trying to implement a slider with content inside it, and am using Cycle2 for it's simplicity.
I've got most of it together, the one thing I'm having problems with is that percentage widths do not work well in Cycle2 sliders...
Essentially I have one picture which is width;100% of it's container, and another two which are 50% of their container, and sit side by side. You can see it all here on the demo page I've made. But there is also a codepen (although it's harder to see here, but the code is the same).
The problem is that in order to Cycle through, Cycle2 seems to play with the width of the container. This means that all my pictures are are also affected as they are based off percentage widths. If you click "next" you'll see the animation looks weird as the pictures animate to different sizes before disappearing. I want everything to stay the same, but simply scroll off.
I'm just wondering what your solutions to this would be, I'd really prefer to use Cycle2 as I know it's nice and easy to style but maybe it's not possible. Or how else would you work a responsive design in this case?
<div class="slider cycle-slideshow"
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
>
This was solved by adding width:100% to .slideItem