CODEWITHSUNDEEP
javascriptjqueryjquery-cycle2
verism
verism

Reputation: 1164

Target the slide after next in jQuery Cycle2

My objective is to have the previous and subsequent slides (<img>) appearing before and after each current slide, within Cycle2. I can achieve this with the previous slide no problem, I just can't quite get the one after.

My HTML is as follows:

<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>

And my 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 )
            });
    }

}

This is the closest I can get without getting undefined or behavioural errors, but the .sliderNext div is not populated.

I realise I'll have to use a conditional once the penultimate slide is reached, but for now just having something work would be enough.

Upvotes: 1

Views: 277

Answers (1)

Regent
Regent

Reputation: 5176

Since neither cloned element $(incomingSlideEl).clone() has any next elements (it is even not in DOM tree) nor you actually want to clone original image (you want to clone next image), it should be:

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

Fiddle example

The idea is to find next image of current image and to add clone of this next image.

Upvotes: 1

Related Questions