JQuery Cycle2 슬라이드 쇼 중첩 슬라이드 쇼 다음과 이전 버튼

Question

Cycle2 플러그인을 사용하여 일부 이미지와 다른 슬라이드 쇼로 구성된 슬라이드 쇼를 표시합니다. 내부 슬라이드 쇼의 다음 및 이전 버튼은 IMHO를 올바르게 설정하지만 어떤 이유로 든 (예에서 위아래로) 작동하지 않습니다.

data-cycle-prev="#upDiv"
data-cycle-next="#downDiv"

그리고

<div id="upDiv">
    <a href="#" id="upImg"><img src="images/up.png" alt="" /></a>
    <p>scroll up</p>
</div>
<div id="downDiv">
    <p>to see more scroll down</p>
    <a href="#" id="downImg"><img src="images/down.png" alt="" class="outer-slide" /></a>
</div>

어떻게 작동하게 할 수 있습니까?

다음은 데모입니다. http://jsfiddle.net/fku2l/22/

Answer 1

몇 가지 문제가 있습니다

첫째, 사이클 2에서 중첩 슬라이드 쇼는 다음과 같습니다.

<div class="cycle-slideshow" data-cycle-slides="> div">
    <div><img src="..."/></div>
    <div>
        <div class="cycle-slideshow inner-slideshow">
            <img src="..."/>
            <img src="..."/>
        </div>
    </div>
    <div><img src="..."/></div>
</div>

중요한 것은 슬라이드가 모두 같은 태그 여야한다는 것입니다. img img img 또는 div div div ~ 아니다 img div img. 따라서 첫 번째 레벨의 슬라이드 레벨을 감싸 야합니다. imgd divs 내부. 그들은 지금은 아니기 때문에 img, 기본값 인 경우 설정해야합니다. data-cycle-slides="> div" 외부 슬라이드 쇼에.

또한, 당신은 또한 div 내부에있는 내부 슬라이드 쇼가 필요합니다. <div><div class="cycle-slideshow inner-slideshow"> 그냥 대신 <div class="cycle-slideshow inner-slideshow">. 슬라이드 쇼는 중첩 될 수 있지만 검을 교차 할 수는 없습니다.

현재 당신의 예에서 일어나고있는 것은 두 쇼의 동일한 다음과 이전 버튼을 사용하여 두 슬라이드 쇼를 함께 실행하고 imgs에서 div에스. 따라서 2 개의 중첩 슬라이드 쇼를 실행하는 대신 2 개의 동시 슬라이드 쇼를 실행하는데, 여기서 하나는 서로 내부에있는 슬라이드 쇼의 부산물이며, 첫 번째 쇼의 슬라이드가 div에스.

작동하는 바이올린을 만들었습니다. http://jsfiddle.net/filever10/dlqpd/

소스를 여기에서 볼 수 있도록 자세한 내용을 배울 수 있습니다. http://jquery.malsup.com/cycle2/demo/nested.php