How to set SWIPER start with the first slide?

Question

I have an issue with the swiper (http://www.idangero.us/sliders/swiper/api.php)... I am on page 1 and when I swich to the page 2 I want the slider to start with the first slide. I set mySwiper.swipeTo(0, 0, false); on pagebeforeshow and it doesnt work. the STRANGEST thing is that it works perfectly if I swich to second or third slide (ex mySwiper.swipeTo(1, 0, false) or mySwiper.swipeTo(2, 0, false)) but on the first one (0) it simply doesn't swich. Why is that? I tried every possible thing. It doesn't switch on the first slide, only on others. The only method that works is onpageshow but its ugly because first it shows one slide and after another.. I also tried with mySwiper.swipePrev(); a few times but its blocking on slide 2.. It wont go on the first slide.

UPDATE:

here's the jsfiddle example: http://jsfiddle.net/alecstheone/9VBha/103/

so... if I go to second page and I swipe to the third slide than I right click and go back, than back to page 2 the swiper is still on the slide 3 and it should be on page 1 as I set

mySwiper.swipeTo(0, 1, true);  

If I set:

mySwiper.swipeTo(1, 1, true);  
or
mySwiper.swipeTo(2, 1, true);  

it works... only on 0 it wont...

I also noticed that in the 1.8.0 version of the swiper it works that command, but in the latest (2.6.0) it wont.

Answer 1

If you look up the method swipeTo() in the library you'll find the following condition:

if (index > (_this.slides.length - 1) || index < 0) return;

Which indicates you can only use this method from index 1.

Why don't you just initialize the plugin without the pageBeforeShow option? It should take the first slide.

UPDATE

Finally got it to work and I also hope the author reads this since this is a terrible library to setup as the configuration parameters go berzerk throughout the whole script.

$(page2).click(function () {
    //mySwiper.activeIndex = 0;
    //mySwiper.startAutoplay();
    //mySwiper.swipeReset();
    //mySwiper.reInit(true);
    setTimeout(function(){
        // to make sure the swiper-wrapper is shown after the animation of $.mobile.changePage()
        mySwiper.swipeTo(0);
    }, 200);

    $.mobile.changePage(page2);
    // $("#photo").hide().delay(1000).fadeOut();
    // $("#photo").animate({opacity: 0.0}, 1);
});

As you can see, the commented functionality seems straightforward but only brings frustration to the people using this. For me this is a design flaw in naming convention and boolean traps.

I also noticed you set height and width dynamically and I'm sure there "is a way" to let the script calculate these parameters as it uses a polyfill for getComputedStyle(). Or you might try to use CSS3 calc() to take some performance hit out of JS.

Second time I use this library and again I had to use the unminified version to debug the functions and it's parameter setup which doesn't work together very well. Only a set of combinations can make this library work and it's up to the developer to figure this whole bunch out.

Good luck on the script and note that the provided code really helped (very quickly) in understanding the problem.

DEMO