Using JQuery
$('.slider').cycle({
fx: 'scrollHorz',
slides: '>a',
swipe: true,
easing: 'easeInOutExpo',
prev:'.btn_prev',
next:'.btn_next',
timeout: 5000,
speed: 1000,
});
Here is the HTML structure:
<div class="slider">
<a class="cycle-slide">
<img src="slide07.jpg">
<div class="caption">
skdfksfksdfksdhfvdkvdk
</div>
</a>
<a class="cycle-slide">
<img src="slide07.jpg">
<div class="caption">
skdfksfksdfksdhfvdkvdk
</div>
</a>
<a class="cycle-slide">
<img src="slide07.jpg">
<div class="caption">
skdfksfksdfksdhfvdkvdk
</div>
</a>
</div>
This is the CSS style for the caption:
.caption {
position: absolute;
top: 0;
right: 0;
background: #000;
opacity: 0.7;
height: 100%
width: 300px;
}
Despite following the correct syntax, the caption does not appear as intended on the right side of the image. I have struggled to troubleshoot this issue and cannot figure out why it's not working.
I noticed that a demo on the Cycle website shows captions by using the "alt" attribute and placing them at the bottom. I am perplexed as to why my captions are not displaying on the right side.
Update: Issue with arrows - next and prev buttons
<a href="#" class="btn_prev"></a>
<a href="#" class="btn_next"></a>
How can I ensure that these arrow buttons remain aligned with the caption area of each slide so they move together during transitions?