I am trying to use the jquery.cycle2.js plugin to create a transtional carousel - http://jquery.malsup.com/cycle2/demo/carousel.php. I want this carousel to show multiple images at once, as is seen in the demo. However, I would like each slide to have its own caption, so that beneath every picture is a caption. All I have been able to do is show one caption on the screen at a time, which is not what I want. Here is my code:
<div class="cycle-slideshow"
data-cycle-fx=carousel
data-cycle-timeout=1000
data-cycle-caption="#alt-caption"
data-cycle-caption-template="{{alt}}"
data-cycle-carousel-visible=3
data-cycle-carousel-fluid=true
>
<img src='img1.jpg' alt='img1' />
<img src='img2.jpg' alt='img2' />
<img src='im3.jpg' alt='img3' />
<img src='img4.jpg' alt='img4' />
</div>
<!-- empty element for caption -->
<div id="alt-caption" class="center"></div>
I figured it out. We can't leverage the data-cycle-caption for this, we instead need to leverage the data-cycle-slides instead. This will allow us to use a image/text li element to be the slide. Here is my code:
<ul class="cycle-slideshow"
data-cycle-fx=carousel
data-cycle-timeout=1000
data-cycle-slides="li"
data-cycle-carousel-visible=3
data-cycle-carousel-fluid=true
>
<li><img src='img1.jpg' alt='img1' /><div>Caption 1</div></li>
<li><img src='img2.jpg' alt='img2' /><div>Caption 2</div></li>
<li><img src='im3.jpg' alt='img3' /><div>Caption 3</div></li>
<li><img src='img4.jpg' alt='img4' /><div>Caption 4</div></li>
</ul>