jQuery Cycle2轮播中元素周围的边距

时间:2014-03-12 21:40:46

标签: jquery jquery-cycle2

我正在使用Cycle2创建一个水平滚动的jQuery图像轮播。图像均为高度均匀(200px)但宽度不同。

这是用于显示轮播的代码:

<div id="outer">
    <div id="prev"></div>
    <div id="inner"
        class="cycle-slideshow"
        data-cycle-fx="carousel"
        data-cycle-timeout="0"
        data-cycle-prev="#prev"
        data-cycle-next="#next"
        data-cycle-slides="a"
        >
        <a href="/images/01.png" /><img src="/images/200/01.png" /></a>
        <a href="/images/02.png" /><img src="/images/200/02.png" /></a>
        ...
        <a href="/images/12.png" /><img src="/images/200/12.png" /></a>
    </div>
    <div id="next"></div>
</div>

...这是浏览器中的结果:

Cycle2 carousel without extra styling

实际上旋转木马中显示了四个单独的图像,但它们之间没有间距。

这是我要找的结果:

Cycle2 carousel - what I'm after

我想在Cycle2轮播中为图像添加右边距,但是当我修改imga元素以包含边距或填充时,轮播不会为零左边正确。

相反,轮播似乎偏向左侧,使得第一个图像被部分隐藏。在下图中,我为每个margin-right: 10px元素添加了a

Cycle2 carousel when margin-right: 10px is added to each anchor element

除了生成包含主要艺术品周围空白区域的图像之外,有没有人可以建议如何为图像添加边距或填充?

感谢。

0 个答案:

没有答案