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.

Wizard

I might be able to help you if you add your code (not just a method) and your swiper settings. Also, going to page2 is a pagerefresh? So page1 has nothing to do with your story or does it? – Scratch

@Tim Vermaelen Its pretty complicated to show yuo my code because it has many external filed and its pretty hard to integrate it in jsfiddle but I'll try my best to describe the actual situation. Well actually page 1 is the main menu page for my app, page 2 is the game page in wich the player plays the game and page 3 is a congratulation page wich appears after a player passes a lvl and afterwards it returns back to page 2 with another content on slides and thats when the slider should initialise to the first page... – Wizard

So you go back to the menu once the player reached page3? Again, pages are different files, right? So your swiper gets initialized only on page2, right? – Scratch

@TimVermaelen Yes, the swiper gets initialized only once on pagecreate 2 and afterwards only its elemnets change. The thins is that I swich from page 2 to 3 than back to 2 than back to 3 etc... I want that every time I go on page 2 the swiper should be on the first slide.. – Wizard

Answer 1

 const swiper2 = new Swiper('.swiper-container2', {
  direction: 'vertical',
  slidesPerView: 1,
  initialSlide: 2,
});

you can use initialSlide to set first slide

Safire

Answer 2

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

Scratch

I need it to start from the first slide every time I access that curent page, that contains the slider. I have an app and I access that page on every lvl and I need that on each lvl the slider should begin with the first slide? Aren't there any other workarounds? It doesn't work on pagebeforeshow only on pageshow but its ugly as described before. I also doesnt work on pagebeforshow for the congratulations page wich appears when I pass a lvl. How can I solve this? – Wizard

so is there any possible solution to this?? – Wizard

It's a bit unfortunate as I have to understand your story, not code. Kinda difficult to be honest. – Scratch

You know what, pretty ugly and usually not done but just try it out: find the condition I'm referring to in my answer and change index > to index >= and let me know if that works for you. – Scratch

I tried to set the index >= but it doesn't work. So to shorten my question lets say I have page 1 and page 2 wich I swich (I go from page 1 to 2 and from 2 to 1 several times...). The swiper is on page 1. I want that every time I go on page 1 the swiper should be on the first slide... Is that possible? – Wizard

I don;t know why the fix you provided doesn't work... It should have! :( Is there any possible solution to this? – Wizard

I can't beleave that such a simple thing isn't possible to such a complex product.. – Wizard

I don't understand why the fix you provided doesn't work... With my logit it should have.... – Wizard

Is anybody who knows how to solve this aimple task? I'm trying for days and nothing make any sense..... – Wizard

At least the creators of the slider may help me here pleasE? I dont know who else should I contact for this issue. – Wizard

Dude, you scare me! At least make an effort in PROVIDING CODE! – Scratch

swipeTo(index, speed, runCallbacks) => setting speed to 1 was the mistake to make. – Scratch

And what should I set the speed parameter? I also tried swipeTo(0); and it's also not working... – Wizard

It's optional, you don't have to set it. Are you telling me my fiddle doesn't work for you? This is not the end? :))) – Scratch

It's clear we're both looking for the end :)) but it's not reached yet.. :)) No the jsfiddle you provided isn't working, also if I set mySwiper.swipeTo(0); Nothing happends when I click page2 – Wizard

let us continue this discussion in chat – Scratch

Answer 3

I had the same problem few months after this discussion. I know it's a ugly way to fix the problem, but its the only way I found :

When you call mySwiper.swipeTo(0), this line below :

if (newPosition === currentPosition) return false;

will return false and not apply the swipe, because newPosition = 0 and currentPosition = 0

so i changed this line on the method to

if (newPosition === currentPosition && newPosition !== 0) return false;

and it works now fine.

Dermatogen

Answer 4

Since this does not work

mySwiper.swipeTo(0, 1, false)

you could also force it like

var swiper = new Swiper(
    ".swiper-container",
    slideConfigs
);
swiper.on('beforeInit', function () {
    swiper.slideTo(1, 1, false)
    swiper.slidePrev(1, false)
})
swiper.init()

And don't forget to add this to your configs

init: false,

Croup

Answer 5

In case someone encouters this problem, at Swiper v8.x, I use swiper.slideTo(0) to slide to the first slide

Misunderstood