帶有多個標題的jquery.cycle2轉換插件

Question

我正在嘗試使用jquery.cycle2.js插件創建一個transtional輪播 - http://jquery.malsup.com/cycle2/demo/carousel.php。我希望這個傳送帶能夠一次顯示多個圖像，如演示中所示。不過，我希望每張幻燈片都有自己的標題，以便每張圖片下面都有標題。我所能做的就是一次在屏幕上顯示一個標題，這不是我想要的。這是我的代碼：

<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> 

Answer 1

我想通了。我們無法利用數據循環說明，反而需要利用數據循環幻燈片。這將允許我們使用圖像/文本li元素作爲幻燈片。這裏是我的代碼：

<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>