Question

希望有人可以帮助我。我不是使用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>

Answer 1

这可能不起作用的原因是因为Cycle 2在加载插件后立即进入所有幻灯片，因此您的jQuery不会影响您的幻灯片，因为已经初始化了第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

Cycle2 - 无法初始化滑块

1 个答案: