Cycle2滑块无法设置基于百分比的宽度动画?

时间:2014-07-31 20:27:36

标签: jquery jquery-cycle jquery-cycle2

我正在一个响应迅速的网站上工作。我试图实现一个包含内容的滑块,并且使用Cycle2是为了它的简单性。

我已将大部分内容放在一起,我遇到的一个问题是,在Cycle2滑块中,百分比宽度不能正常工作......

基本上我有一张宽度为100%的容器,另外两张是容器的50%,并排放置。你可以在我demo page制作的所有内容中看到这一切。但是还有一个codepen(尽管在这里看起来比较难,但代码是一样的。)

问题是,为了循环,Cycle2似乎与容器的宽度一起玩。这意味着我的所有图片也会受到影响,因为它们基于百分比宽度。如果你点击" next"您会看到动画看起来很奇怪,因为图片在消失之前会生成不同大小的动画。我希望一切都保持不变,但只需滚动即可。

我只是想知道你的解决方案是什么,我真的更喜欢使用Cycle2,因为我知道它很好很容易设计,但也许它不可能。或者在这种情况下你会如何处理响应式设计呢?

<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
        >

1 个答案:

答案 0 :(得分:0)

通过将width:100%添加到.slideItem

来解决此问题

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