1

最初のスライダーをナビゲーションで操作し、2 番目のスライダーを自動的に操作する必要がありますが、ナビゲーション ボタンをクリックすると両方のスライダーが実行されます。ここにコード：

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

1 に答える 1

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>

次に、slidesow のカスタム クラスで何かを操作する前に、JQuery コードに次の単純な行を含める必要があります。

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

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

その後は、通常のサイクル スライドショーと同じようにすべての操作を行うことができます。お役に立てば幸いです。

元：

$('.slide1').cycle('goto', 4);
于 2013-11-18T16:32:29.283 に答える