CODEWITHSUNDEEP
javascriptjquerysliderswiper.js
andcl
andcl

Reputation: 3548

Swiper slider. Prepeding one slide and simulating transition to it

I want to achieve a specific behaviour with this awesome JS slider (Swiper) using its complete API, but I am out of luck until the moment... Need some help with this:

Current situation:

What I want each time I click a button is:

I want this "rare" behaviour because my slider has to show several hundreds of slides, and loading all of them at a time from the beginning results in an extremely slow page load since it has to download hundreds of images...

Thanks in advance.

Upvotes: 0

Views: 3546

Answers (1)

andcl
andcl

Reputation: 3548

I finally got it working, like this:

Once the button (with class="prev") is clicked:

$(document).on('click', '.prev', function() {

    // If it is the first slide...
    if (mySwiper.activeIndex == 0) {

        // Slide content
        var slide = '<p>New slide</p>';

        // Creation of the slide (it instantly moves to index 0 --> the new slide)
        mySwiper.prependSlide(slide);

        // And then instant (speed = 0) swipe to slide with index 1
        // (the one we were watching before creating the new...)
        mySwiper.swipeTo(1, 0, false);

        // Finally, we implement the visual transition to new slide (index 0)
        mySwiper.swipePrev();
    }
});

I hope it helps somebody. Thanks.

Upvotes: 2

Related Questions