javascript - Cycle2-无法初始化滑块

希望有人可以帮助我。我不是使用Cycle2 jQuery插件的专家，我想实现它。据说Cycle2应该能够滑动复合材料，而这正是我想要做的。

我有看起来像下面的示例的html。该代码实际上是由djangocms生成的，除非我使用JavaScript添加属性，否则我无法将属性添加到html结构中...

所以我想我只有一个选择，那就是使用以下方法初始化滑块：

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

但这似乎无济于事。

我也试过这个：

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

我的HTML结构...

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

最佳答案

之所以可能不起作用，是因为Cycle 2在加载插件后立即启动所有幻灯片，因此jQuery不会影响幻灯片，因为Cycle 2已经初始化。

如果添加属性，然后将幻灯片放回原处，将会发生什么：

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

您也可以尝试将选项作为对象传递给幻灯片：

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

最后，您还尝试重新编写第2周期的默认设置，以使所有幻灯片均能正常工作。除非有必要，否则应避免这种情况，但它可能会起作用！

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

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

更新：

您可能想在$(document).ready之前重写默认设置，以便在启动插件时循环使用您的默认选项。它会自动在$(document).ready上调用自己。

源代码：
https://github.com/malsup/cycle2/blob/master/src/jquery.cycle2.core.js#L678-L681