Swiper slider. Prepeding one slide and simulating transition to it

Question

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:

Only one slide at the beginning.

What I want each time I click a button is:

The dynamic creation of a new slide BEFORE the first one in each case --> Easy thing, with the prepend() method of Swiper API :)
But (and here is the problem) I want the final users to have the sensation of being just loading the preceding slide, i.e., clicking the button and seeing the swipe transition towards left...

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.

andcl andcl · Accepted Answer · 2014-04-18T10:32:19

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.

Swiper slider. Prepeding one slide and simulating transition to it

1 Answers