jQuery를주기 2 회전 목마 특히,

Question

나는 사이클이 플러그인을 사용 해본 결과이 예제 링크 : http://jquery.malsup.com/cycle2/demo/caro-pager.php

내가 로컬이있어, 그리고 내가 있도록 변경하려면 필요한 경우 번호가있는 호출기를 사용하여 다음/prev와 호출기를 모두 가질 수있는 옵션이 있습니다. 또는 하나를 숨기고 다른 하나를 사용할 수 있습니다.

제가 설정 한 예제를 보면 문제가 있습니다. http://jsfiddle.net/ZYEbT/ - 컨베이어의 data-allow-wrap="false" 속성으로 인해 호출기가 제대로 표시되지 않는 것을 확인할 수 있지만이를 제거하면 클릭 가능한 컨베이어 이미지가 분리되지만 모든 호출기 링크가 표시됩니다.

다음과 이전 버전 모두 호출기와 함께 사용할 수 있습니까?

내 HTML :

<div id="slideshow-1"> 
    <div id="cycle-1" class="cycle-slideshow" 
     data-cycle-slides="> div" 
     data-cycle-timeout="0" 
     data-cycle-caption="#slideshow-1 .custom-caption" 
     data-cycle-fx="fade" 
     > 
     <div><img src="http://jquery.malsup.com/cycle2/images/beach1.jpg"></div> 
     <div><img src="http://jquery.malsup.com/cycle2/images/beach2.jpg"></div> 
     <div><img src="http://jquery.malsup.com/cycle2/images/beach3.jpg"></div> 
     <div><img src="http://jquery.malsup.com/cycle2/images/beach4.jpg"></div> 
     <div><img src="http://jquery.malsup.com/cycle2/images/beach5.jpg"></div> 
     <div><img src="http://jquery.malsup.com/cycle2/images/beach6.jpg"></div> 
     <div><img src="http://jquery.malsup.com/cycle2/images/beach7.jpg"></div> 
     <div><img src="http://jquery.malsup.com/cycle2/images/beach8.jpg"></div> 
     <div><img src="http://jquery.malsup.com/cycle2/images/beach9.jpg"></div> 
    </div> 
</div> 

<div id="carousel"> 
    <div id="cycle-2" class="cycle-slideshow" 
     data-cycle-slides="> div" 
     data-cycle-timeout="0" 
     data-cycle-prev="#carousel .cycle-prev" 
     data-cycle-next="#carousel .cycle-next" 
     data-cycle-fx="carousel" 
     data-allow-wrap="false" 
     data-cycle-pager="#custom-pager" 
     data-cycle-pager-template="<span><a href=#> {{slideNum}} </a></span>" 
     > 
     <div><img src="http://jquery.malsup.com/cycle2/images/beach1.jpg"></div> 
     <div><img src="http://jquery.malsup.com/cycle2/images/beach2.jpg"></div> 
     <div><img src="http://jquery.malsup.com/cycle2/images/beach3.jpg"></div> 
     <div><img src="http://jquery.malsup.com/cycle2/images/beach4.jpg"></div> 
     <div><img src="http://jquery.malsup.com/cycle2/images/beach5.jpg"></div> 
     <div><img src="http://jquery.malsup.com/cycle2/images/beach6.jpg"></div> 
     <div><img src="http://jquery.malsup.com/cycle2/images/beach7.jpg"></div> 
     <div><img src="http://jquery.malsup.com/cycle2/images/beach8.jpg"></div> 
     <div><img src="http://jquery.malsup.com/cycle2/images/beach9.jpg"></div> 
    </div> 


    <a href="#" class="cycle-prev">&laquo; prev</a> 
    <a href="#" class="cycle-next">next &raquo;</a> 

</div> 

<div id="custom-pager" class="center"></div> 

jQuery를 : 나는 아무것도 실종 경우

jQuery(document).ready(function($){ 
     var slideshows = $('.cycle-slideshow').on('cycle-next cycle-prev', function(e, opts) { 
      // advance the other slideshow 
      slideshows.not(this).cycle('goto', opts.currSlide); 
     }); 

     $('#cycle-2 .cycle-slide').click(function(){ 
      var index = $('#cycle-2').data('cycle.API').getSlideIndex(this); 
      slideshows.cycle('goto', index); 
     }); 
    }); 

, 내가 당신을 볼 필요가 무엇인지 알려 주시기 바랍니다.

Answer 1

나는 그것을 알아 냈다고 생각합니다. 뭔가 빠졌는지 알려주세요.

먼저, 호출기를 기본 슬라이드 쇼에 놓아야합니다. 그런 다음 cycle-next cycle-prev 이벤트를 사용하는 것 외에도이 이벤트를 추가하십시오. 호출기가 활성화되면 실행되고 두 슬라이드 쇼가 올바른 슬라이드로 이동합니다. Fiddle

: 여기

var slideshows2 = $('.cycle-slideshow').on('cycle-pager-activated', function(e, opts) { 
    // advance the other slideshow 
    slideshows2.not(this).cycle('goto', opts.currSlide); 
}); 

는 행동을 보여줍니다 업데이트 된 바이올린입니다