Why is this Cycle 2 malsup jquery carousel not working with links?

Question

So the carousel works fine when it looks like this:

<div class="banners cycle-slideshow" id="carousel" data-cycle-fx="fadeout" data-cycle-slides="> img" data-cycle-timeout="5000" data-cycle-swipe="true">
  <img src=""/>
  <img src=""/>
  <img src=""/>
  <img src=""/>
</div>

However I want links on each of these images but when I put an <a href=""></a> around each of my images, and then change the data-cycle-slides from

data-cycle-slides="> img" 

To any of these

data-cycle-slides="> a" 
data-cycle-slides="a"  

It doesn't work.

Instead the carousel will show the first image, then when the next one comes it's just blank until the first image comes around again.

Does any one have any experience with Cycle 2 Carousel by malsup that can help me out?

Answer 1

The approach I took was to utilize the custom caption feature. I have no idea if this is the "correct" approach, but it worked for me, and maybe for you too.

<div class="banners cycle-slideshow" id="carousel" data-cycle-fx="fadeout"   data-cycle-slides="> img" data-cycle-timeout="5000" data-cycle-swipe="true" data-cycle-caption="#adv-custom-caption" data-cycle-caption-template="<a href=&quot;{{url}}&quot;></a>">

   <div id="adv-custom-caption"></div>

   <img src="" data-url="First URL here"/>
   <img src="" data-url="Second URL here"/>
   <img src="" data-url="Third URL here"/>
   <img src="" data-url="Fourth URL here"/>

</div>

So this specifies a caption that is simply a link, and is located in a <div> tag that has the css id of #adv-custom-caption. That id is styled like this:

#adv-custom-caption {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 600;
    overflow: hidden;
}

#adv-custom-caption a{
    padding:100%;
}

Conveniently, the .cycle-slideshow class is already styled to be position: relative;, which makes defining absolute positioning on #adv-custom-caption to be no problem.

Now just put the URLs you want to link to for each image in the data-url attribute in each the image tags, and you should be all set.