jQuery Cycle2 多幻灯片导航

【问题标题】：jQuery Cycle2 multiple slideshow navjQuery Cycle2 多幻灯片导航
【发布时间】：2013-10-28 12:02:42
【问题描述】：

我需要使用导航的第一个滑块和第二个自动但单击导航按钮运行两个滑块。代码在这里：

<script type="text/javascript">
jQuery(function(){
  jQuery('.scrollsingle').cycle('prev');
  jQuery('.scrollsingle ').cycle('next');
});
</script>

<button data-cycle-cmd="prev">Prev</button>
<button data-cycle-cmd="next">Next</button>

<div class="images scrollsingle cycle-slideshow" 
    data-cycle-fx="scrollHorz" 
    data-cycle-timeout="4000"
    data-cycle-slides="> div">

   <div>content</div>
   <div>content</div>
   <div>content</div>
   <div>content</div>
</div>

<article class="span3 box boxstaff cycle-slideshow" 
    data-cycle-fx="scrollHorz" 
    data-cycle-timeout="2000"
    data-cycle-slides="> div"
    >

   <div>content</div>
   <div>content</div>
   <div>content</div>
   <div>content</div>
</article>

【问题讨论】：

考虑将答案标记为正确答案。

标签： jquery cycle jquery-cycle

【解决方案1】：

当您声明一个名为“cycle-slideshow”的类时，您将自动初始化幻灯片，这将像对待任何其他类一样以相同的方式处理具有该类的所有容器。您需要做的是通过声明一个不同的类来手动初始化幻灯片，如下所示：

<div class="slide1">
    <img src="image1.jpg">
    <img src="image2.jpg">
    <img src="image3.jpg">
    <img src="image4.jpg">
</div>

<div class="slide2">
    <img src="image5.jpg">
    <img src="image6.jpg">
    <img src="image7.jpg">
    <img src="image8.jpg">
</div>

那么在您为幻灯片操作自定义类下的任何内容之前，您的 JQuery 代码必须具有这些简单的行：

//Initialize slide1
$('.slide1').cycle();

//Initialize slide2
$('.slide2').cycle();

之后，您可以像通常使用循环幻灯片一样进行所有操作... 希望对你有帮助！

例如：

$('.slide1').cycle('goto', 4);

【讨论】：