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

The problem is that you're using the class name cycle-slideshow that cycle uses to automatically start the slider using it's "declarative initialization". By the time you call cycle again in your JavaScript, the slider has already been setup expecting to use images as the slide elements. You can easily fix this by changing the class name on the slider to something else. Here's your updated code:

<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'
});

Here's the updated fiddle: http://jsfiddle.net/dLQPD/254/

Just to be clear you can set all the Cycle 2 options declaratively – via data attributes on your slider container – or programatically – in your JavaScript.

Answer 2

You can add data-cycle-slides=" attribute to your parent div:

Use the data-cycle-slides attribute to provide a jQuery selector which identifies the elements within the container that are slide

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

Updated Fiddle