1 개의 호출기로 제어되는 여러 개의 말풍선 슬라이드 쇼, 시작 동기화 동기화 유지

Question

자, 다시 복잡한 질문이 있습니다. 3 개의 별도 Malsup Cycle 슬라이드 쇼로 구성된 큰 슬라이드 쇼가 있습니다. 현재 슬라이드가 앞에 있고 다른 2 개가 뒤에 있습니다. 왼쪽은 현재 슬라이드의 시작 슬라이드 -1이고 오른쪽 슬라이드는 시작 슬라이드 +1입니다. 이 작동합니다. #next를 클릭하면 세 가지가 모두 실행됩니다. 문제는 호출기를 구현해야하며 호출기는 중앙 슬라이드 쇼 만 제어하고 다른 하나는 제어하지 않습니다.

3 개의 슬라이드 쇼를 모두 트리거 할 수 있도록 3 개의 슬라이드 쇼를 모두 초기 시작 슬라이드 관계에 사용하려면 호출기가 필요합니다.

다음은 JS 코드입니다 :

function featuresSlideshow(){ 

$('ul#main-features-leftbehind').cycle({ 
startingSlide: 0, 
fx: 'scrollLeft', 
timeout: 0, 
speed: 1000, 
easing: 'easeInOutQuart', 
pager: '#main-features-nav', 
next: 'ul#main-features-upfront' 

}); 
$('ul#main-features-rightbehind').cycle({ 
startingSlide: 2, 
timeout: 0, 
fx: 'scrollLeft', 
speed: 1000, 
pager: '#main-features-nav', 
easing: 'easeInOutQuart', 
next: 'ul#main-features-upfront' 
}); 
$('ul#main-features-upfront').before('<ul id="main-features-nav"></ul>').cycle({ 
startingSlide: 1, 
timeout: 0, 
fx: 'blindX', 
rev: 0, 
speed: 1000, 
easing: 'easeInOutQuart', 
next: 'ul#main-features-upfront', 
pager: '#main-features-nav', 
//after: afterUpfrontEvent, 
pagerAnchorBuilder: 
function(idx, slide) { 
    var src = $('img',slide).attr('src'); 
    return '<li><a href="#"><img src="' + src + '" width="50" height="50" /></a></li>'; 
    } 
}); 
} 

그리고 여기에 HTML의 :

<ul id="main-features-leftbehind"> 
    <li><div style="background:url('../images/features_MainSlideShow_slide-0.jpg') no-repeat" class="bg"></div></li> 
    <li><div style="background:url('../images/features_MainSlideShow_slide-1.jpg') no-repeat" class="bg"></div></li> 
    <li><div style="background:url('../images/features_MainSlideShow_slide-2.jpg') no-repeat" class="bg"></div></li> 
    <li><div style="background:url('../images/features_MainSlideShow_slide-3.jpg') no-repeat" class="bg"></div></li> 
</ul> 

<ul id="main-features-rightbehind"> 
    <li><div style="background:url('../images/features_MainSlideShow_slide-0.jpg') no-repeat" class="bg"></div></li> 
    <li><div style="background:url('../images/features_MainSlideShow_slide-1.jpg') no-repeat" class="bg"></div></li> 
    <li><div style="background:url('../images/features_MainSlideShow_slide-2.jpg') no-repeat" class="bg"></div></li> 
    <li><div style="background:url('../images/features_MainSlideShow_slide-3.jpg') no-repeat" class="bg"></div></li> 
</ul> 

<ul id="main-features-upfront"> 
    <li> 
    <img src="../images/features_MainSlideShow_slide-0.jpg" /> 
    <ul class="main-features-band"> 
    <li class="main-features-band-content"> 
    <h3>Feature Title</h3> 
    <p>Short statement about function.</p> 
    </li> 
    <li class="main-features-band-learnmore"><a href="#"><span class="btn-main-features-LearnMore"></span>Learn More</a></li> 
</ul> 
</li> 
    <li> 
    <img src="../images/features_MainSlideShow_slide-1.jpg" /> 
    <ul class="main-features-band"> 
    <li class="main-features-band-content"> 
    <h3>Feature Title</h3> 
    <p>Short statement about function.</p> 
    </li> 
    <li class="main-features-band-learnmore"><a href="#"><span class="btn-main-features-LearnMore"></span>Learn More</a></li> 
</ul> 
</li> 

<li> 
    <img src="../images/features_MainSlideShow_slide-2.jpg" /> 
    <ul class="main-features-band"> 
    <li class="main-features-band-content"> 
    <h3>Feature Title</h3> 
    <p>Short statement about function.</p> 
    </li> 
    <li class="main-features-band-learnmore"><a href="#"><span class="btn-main-features-LearnMore"></span>Learn More</a></li> 
</ul> 
</li> 
          <li> 
    <img src="../images/features_MainSlideShow_slide-3.jpg" /> 
    <ul class="main-features-band"> 
    <li class="main-features-band-content"> 
    <h3>Feature Title</h3> 
    <p>Short statement about function.</p> 
    </li> 
    <li class="main-features-band-learnmore"><a href="#"><span class="btn-main-features-LearnMore"></span>Learn More</a></li> 
</ul> 
</li> 
</ul> 

도, 나는 여러 슬라이드 쇼를 실행하는 방법에 대한 읽는 많은 일을 한 당신에게 너무 많은 사람을 감사 Malsup은 호출기를 사용하여 "이중"슬라이드 쇼를 만들었지 만 시각적 호출기에서 작동하지는 못합니다.

Answer 1

자신의 호출기를 만들어야합니다. 대략 내 방식은 다음과 같습니다.

$('#slides').cycle(); 
$('#titles').cycle(); 

$('a.nav-button').click(function(e) { 
    var slide = $('a.nav-button').index(this); 
    $('#slides').cycle(slide); 
    $('#titles').cycle(slide); 
    e.preventDefault(); 
}); 

그런 다음 수동으로 (또는 PHP/Ruby/무엇이든 사용) 탐색 버튼을 출력하면됩니다.