javascript - How to show slider with caption? -
jquery
$('.slider').cycle({ fx: 'scrollhorz', slides: '>a', swipe: true, easing: 'easeinoutexpo', prev:'.btn_prev', next:'.btn_next', timeout: 5000, speed: 1000, });
html
<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>
css
.caption { position: absolute; top: 0; right: 0; background: #000; opacity: 0.7; height: 100% width: 300px; }
wanted have caption in black background opacity on right side description. caption not appear @ all. have been struggling have caption appear on image on right side.
checked demo on cycle website , shows caption if use alt , appears on bottom. not sure why captions not working on right side.
update: issue arrows - next , prev
<a href="#" class="btn_prev"></a> <a href="#" class="btn_next"></a>
how make them stay on of slides' caption area slides together?
as per caption demo
you can add simple, default caption including empty div in slideshow container class cycle-caption
you using class called caption
instead of cycle-caption
per documentation.
Comments
Post a Comment