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

so carousel works fine when looks 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 want links on each of these images when put <a href=""></a> around each of images, , change data-cycle-slides

data-cycle-slides="> img"  

to of these

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

it doesn't work.

instead carousel show first image, when next 1 comes it's blank until first image comes around again.

does 1 have experience cycle 2 carousel malsup can me out?

the approach took utilize custom caption feature. have no idea if "correct" approach, worked me, , maybe 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 specifies caption link, , located in <div> tag has css id of #adv-custom-caption. id styled 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, .cycle-slideshow class styled position: relative;, makes defining absolute positioning on #adv-custom-caption no problem.

now put urls want link each image in data-url attribute in each image tags, , should set.