在jQuery Cycle2中定位下一個幻燈片

Question

我的目標是在Cycle2內，在每張當前幻燈片之前和之后出現上一張和下一張幻燈片（ <img> ）。 我可以用上一張幻燈片來實現這一點，但我不能完全做到。

我的HTML如下：

<section>
    <div class="sliderPrev"></div>   // Previous slide (1.jpg) goes here
    <div class="banner_images">
        <img src="1.jpg">
        <img src="2.jpg">           // Hypothetical current slide
        ...
        <img src="n.jpg">
    </div>
    <div class="sliderNext"></div>   // Next slide (3.jpg) should go here
</section>

而我的jQuery：

var cycle = {

    before : function( e, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag ) {
        // Works!
        $('.sliderPrev').html( $.clone( outgoingSlideEl ) );
        // Doesn't work...
        $('.sliderNext').html( $( incomingSlideEl ).clone().next('img')[0] );
    },

    run : function() {
        $('.banner_images').cycle( this.attrs )
            .on( 'cycle-before', function( e, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag ) {
                cycle.before( e, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag )
            })
            .on( 'cycle-after', function( e, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag ) {
                cycle.after( e, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag )
            });
    }

}

這是我所能獲得的最接近的結果，沒有出現未定義或行為錯誤，但是沒有填充.sliderNext div。

我意識到一旦達到倒數第二張幻燈片，我就必須使用有條件的，但是現在只要有一些工作就足夠了。

Answer 1

由於克隆的元素$(incomingSlideEl).clone()都沒有任何下一個元素（甚至不在DOM樹中），也不是您實際上要克隆原始圖像（您要克隆下一個圖像），因此它應該是：

$('.sliderNext').html($(incomingSlideEl).next('img').clone());

小提琴的例子

這個想法是找到當前圖像的下一個圖像，並添加下一個圖像的克隆。