3

I am using Cycle2 to create a jQuery image carousel which scrolls horizontally. The images are all of uniform height (200px) but have different widths.

This is the code used to display the carousel:

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

... and this is the result in a browser:

Cycle2 carousel without extra styling

There are actually four separate images shown in the carousel, but no spacing between them.

This is the result I am looking for:

Cycle2 carousel - what I'm after

I would like to add a right margin to images in a Cycle2 carousel, but when I modify the img or a element to include a margin or padding, the carousel does not 'zero' to the left correctly.

Instead, the carousel appears to be offset to the left such that the first image is partially hidden. In the following picture, I have added margin-right: 10px to each a element:

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

Could anyone suggest what to do to add margin or padding to the images, other than generating images which include a blank area around the main artwork?

Thanks.

Chris
  • 135
  • 2
  • 14
  • 1
    It is working fine for me, but only when you go forwards, http://jsfiddle.net/bbernar1/3weH2/7/ If you go backwards, it looks like it calculates the distance to go backwards based on the width current slide, instead of the width of the slide you are going to. So if you go backwards once, it will mess everything else up. Is this what you are seeing as well? – Bryan Mar 13 '14 at 17:45
  • 2
    If so, here is a fixed version: http://jsfiddle.net/bbernar1/3weH2/9/ If this is helps I can turn it into an answer for better readability. – Bryan Mar 13 '14 at 18:08
  • Wow thanks for all your work Bryan, I really appreciate your time. What you describe is what I saw, and your first fiddle demonstrates the issue well. Your second fiddle looks like it will do the trick! I'm going to see if I can get it to work in my code now. – Chris Mar 13 '14 at 21:16
  • Hi Bryan, I've tried integrating your code into my page, and it _nearly_ works, but not quite. The first image still loads with some of its left side cut off, and in order to get reliable functionality, as demonstrated in your second fiddle, the carousel has to be progressed through fully once. After that, the slides reliably start on the left with none missing. I have also just noticed that in it's un-doctored form, pressing `prev` still messes up the offset. I think I need a solution other than Cycle2 for this particular feature. Thanks once again for your time. – Chris Mar 13 '14 at 21:37

0 Answers0