jquery - sliding Item change instead of img - cycle2

Question

Hello please check demo

If slide items are img it will work

<div class="cycle-slideshow testimonials">

            <blockquote class="cycle-slide">
                 text
            </blockquote>



             <blockquote class="cycle-slide">
                 text
            </blockquote>



</div>


$('.cycle-slideshow').cycle({
    fx: 'fade',
    speed: 3000,
    timeout:4000,
    slides:   '> blockquote'
 });

Answer 1

问题是您正在使用cycle-slideshow循环使用的类名来使用它的“声明性初始化”来自动启动滑块。当您在 JavaScript 中再次调用循环时，滑块已经设置好，希望使用图像作为幻灯片元素。您可以通过将滑块上的类名更改为其他名称来轻松解决此问题。这是您更新的代码：

<div class="cycle-testimonials">
    <blockquote class="cycle-slide">
        text
    </blockquote>
    <blockquote class="cycle-slide">
        text
    </blockquote>
</div>


$('.cycle-testimonials').cycle({
    fx: 'fade',
    speed: 3000,
    timeout:4000,
    slides: '> blockquote'
});

这是更新的小提琴：http: //jsfiddle.net/dLQPD/254/

需要说明的是，您可以以声明方式设置所有 Cycle 2 选项——通过滑块容器上的数据属性——或以编程方式——在 JavaScript 中。

Answer 2

您可以将data-cycle-slides="属性添加到您的父 div：

使用 data-cycle-slides 属性提供一个 jQuery 选择器，用于标识容器中的滑动元素

<div class="cycle-slideshow testimonials" data-cycle-slides="> blockquote">

更新小提琴