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>

带有多个标题的jquery.cycle2过渡插件

1 个答案: