Cycle2 - Can't initialize the slider

Question

Hopefully someone can help me with this. I am not an expert on use of Cycle2 jQuery plugin and I would like to implement it. Supposedly Cycle2 is supposed to be able to slide composites and that is what I am trying to do.

I have html that looks like the sample below. The code is actually generated by djangocms and I don't have the ability to add attributes to the html structure unless I am adding them using JavaScript...

So I suppose I am left with one option and that is to initialize the slider using this:

$('.cycle-slideshow').cycle();

But that doesn't seem to do anything.

I also tried this:

// Cycle Slideshow
$('.cycle-slideshow').attr('data-cycle-fx', 'scrollHorz');
$('.cycle-slideshow').attr('data-cycle-timeout', '2000');
$('.cycle-slideshow').attr('data-cycle-slides', '> div');

My HTML structure...

<div class="cycle-slideshow">

<div class="slider">    
    <h2>Teaser Title 1</h2>
     <img src="/media/cms_page_media/2014/8/20/Banner1.png" alt="Teaser Title 1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

<div class="slider">
    <h2>Teaser Title 2</h2>
    <img src="/media/cms_page_media/2014/8/20/Banner2.png" alt="Teaser Title 2">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

<div class="slider">
    <h2>Teaser Title 3</h2>
    <img src="/media/cms_page_media/2014/8/20/Banner3.png" alt="Teaser Title 3">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

<div class="slider">
    <h2>Teaser Title 4</h2>
    <img src="/media/cms_page_media/2014/8/20/Banner4.png" alt="Teaser Title 4">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

</div>

Answer 1

The reason why that might not work is because Cycle 2 Inits all slideshows right after it loads the plugin, so your jQuery won't affect your slideshows, because Cycle 2 has already been initialized.

What happens if you add the attributes and THEN init the slideshow:

$('.cycle-slideshow')
    .data('cycle-fx', 'scrollHorz')
    .data('cycle-timeout', '2000')
    .data('cycle-slides', '> div')
    .cycle();

You can also, try to pass your options as an object to your slideshow:

$('.cycle-slideshow')
    .cycle({
        'fx' : 'scrollHorz',
        'timeout' : 2000,
        'slides' : '> div'
    });

Finally, you also try re-writing the cycle 2 defaults in order for all your slideshows to work accordingly. This should be avoided unless necessary, but it might work!

$.fn.cycle.defaults = $.extend($.fn.cycle.defaults, {
        'fx' : 'scrollHorz',
        'timeout' : 2000,
        'slides' : '> div'
    });

$('.cycle-slideshow').cycle();

UPDATE:

You might want to re-write the defaults before $(document).ready so that cycle uses your default options when initiating the plugin. It automatically calls itself on $(document).ready.

Source Code: https://github.com/malsup/cycle2/blob/master/src/jquery.cycle2.core.js#L678-L681