javascript - Cycle2 - 无法初始化 slider

Question

希望有人能帮助我解决这个问题。我不是使用 Cycle2 jQuery 插件的专家，但我想实现它。据说 Cycle2 应该能够滑动复合 Material ，这就是我正在尝试做的。

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

所以我想我只剩下一个选择，那就是使用以下方法初始化 slider :

$('.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>

Answer 1

这可能不起作用的原因是，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