Cycle2를 사용하여 슬라이드 쇼를 연결하십시오.

Question

Cycle2를 사용하여 슬라이드 쇼를 링크하는 방법을 찾고 있습니다. 원래 Cycle에서이 작업을 수행 할 수있는 방법이 있었지만 새로운 API는 약간 다릅니다.

기본적으로 서로 다른 슬라이드 쇼에는 2 개의 별도 영역이 필요하지만 하나의 슬라이드 쇼에서 다음을 클릭하면 다른 슬라이드 쇼도 함께 표시되도록 링크가 필요합니다. 이것은 호출기에서도 사용됩니다. 두 슬라이드 쇼에서 data-cycle-pager="#pager"을 사용하려고하면 호출기가 복제되고 모든 것이 깨지기 시작합니다.

행운이 많이 있습니다. 감사!

Answer 1

나는 다음을 수행합니다 :

1. 이벤트 후
2. 훅이 슬라이드 쇼의로 슬라이드 쇼 중 하나에 다음/이전을 추가하고 수동으로 다른 슬라이더를 변경합니다. http://jsfiddle.net/lucuma/tQ4Jj/4/

   HTML :

   <div id="slideone" class="cycle-slideshow item" data-cycle-timeout="3000" data-cycle-speed="300" data-cycle-slides="> div.cycle-slide" data-cycle-fx="fade" data-cycle-pager-template="<a href='#'>{{cycleTitle}}</a>"> 
   
       <div class="cycle-slide" data-cycle-title="Title 1" > 
        <img src="http://placehold.it/550x550/" /> 
        <h2>My title 1</h2> 
       </div> 
       <div class="cycle-slide"> 
        <img src="http://placehold.it/550x550/ff0000" data-cycle-title="Title 2" /> 
   <h2>My title 2</h2> 
       </div> 
       <div class="cycle-slide" data-cycle-title="Title 3"> 
        <img src="http://placehold.it/550x550/" /> 
   <h2>My title 3</h2> 
       </div> 
   
       <a class="cycle-prev">Prev</a>&nbsp;&nbsp;<a class="cycle-next">Next</a> 
   </div> 
   
   <br /><br /><br /><br /><br /> 
   <div id="slidetwo" class="cycle-slideshow item" data-cycle-timeout="3000" data-cycle-speed="300" data-cycle-slides="> div.cycle-slide" data-cycle-fx="fade" data-cycle-paused="true"> 
   
       <div class="cycle-slide" data-cycle-title="Title 1" > 
        <img src="http://placehold.it/550x550/" /> 
        <h2>My title 1</h2> 
       </div> 
       <div class="cycle-slide"> 
        <img src="http://placehold.it/550x550/ff0000" data-cycle-title="Title 2" /> 
   <h2>My title 2</h2> 
       </div> 
       <div class="cycle-slide" data-cycle-title="Title 3"> 
        <img src="http://placehold.it/550x550/" /> 
   <h2>My title 3</h2> 
       </div> 
   
   
   </div> 
   

   JS : 여기

코드입니다

$('#slideone').on('cycle-next', function(event, opts) { 
    $('#slidetwo').cycle('next'); 
}); 

$('#slideone').on('cycle-prev', function(event, opts) { 
    $('#slidetwo').cycle('prev'); 
});