jQuery Cycle2 عرض شرائح الشرائح المتداخلة التالية والأزرار السابقة

Question

يمكنني استخدام البرنامج المساعد Cycle2 لعرض عرض شرائح يتكون من بعض الصور وعرض شرائح آخر. لا تعمل أزرار الشرائح الداخلية التالية و Prev Buttons لسبب ما (لأعلى ولأسفل ، في المثال) على الرغم من أنها يتم تعيينها بشكل صحيح 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. لذلك ستحتاج إلى لف مستواك الأول من الشريحة imgS داخل Divs. لأنهم الآن ليسوا img, ، وهو الافتراضي ، تحتاج إلى ضبط data-cycle-slides="> div" على عرض الشرائح الخارجية.

بالإضافة إلى ذلك ، تحتاج أيضًا إلى أن تكون عرض الشرائح الداخلية داخل Div أيضًا ، مثل <div><div class="cycle-slideshow inner-slideshow"> بدلا من مجرد <div class="cycle-slideshow inner-slideshow">. يمكن أن تكون عروض الشرائح متداخلة ، ولكن لا تعبر السيوف.

ما يحدث حاليًا على مثالك هو أنه يعمل على كل من عروض الشرائح معًا ، وذلك باستخدام أزرار المقبل والمندوجة لكلا العرضين ، وتمزيق imgق من divس. لذا ، بدلاً من تشغيل عروض شرائح متداخلة ، تقوم بتشغيل عروض شرائح متزامنة ، حيث يحدث أحدهما داخل الآخر ، وهو منتج ثانوي لعرض الشرائح يلمس بعضهما البعض مباشرة ولا يتم التداخل على شرائح العرض الأول divس.

صنع كمان يعمل: http://jsfiddle.net/filever10/dlqpd/

يمكنك معرفة المزيد من خلال عرض المصدر هنا: http://jquery.malsup.com/cycle2/demo/nested.php