After using swipeTo / swipeNext I can't swipe back about swiper

[nolimits4web]

Hi, sorry but i don't undertand what you are asking for and what you want to achieve?)) Can you please explain more detailed so i can help you?
Also what do you mean with "transform coordinates are left (0, 0)"?

[herzaso]

I have an application with several slides where each slide has its own unique ID.
I want to be able to change slides by changing the URL (e.g. index.html#slide1, index.html#slide2, etc.)

If I open my application, not from the first slide (e.g. index.html#slide3), I want to see the relevant slide (in this case, slide3), but still be able to swipe back and forth between all slides.

Currently, while the first part is OK (the relevant slide is shown), the second part isn't - meaning that I can't swipe back (slide2).
I've noticed that my swiper-wrapper element has the following style: -webkit-transform: translate(0px, 0px) and I think this is the reason why I can't swipe back (to slide2) - since the x-coordinate is considered 0 while it should have been (-4605px, 0) (each slide is 1535 wide)

If I'm doing something wrong, I would love to know what. Otherwise, I would love to know how to bypass this issue.

Thanks,
Ofir

[herzaso]

Closed the issue by mistake ...

[nolimits4web]

That is really crazy, see this problem too)) So the point is when you use hash equal to some elements ID then as you know browsers will scroll page to this element. The same in your case, browser just scrolls swiper-container to hidden slide, this is not by swipeTo function. So you need to use not direct hash, somethink like "#!/slide1" will work here. Here is working code:

function moveSwiper () {
    var id = window.location.hash.split('#!/')[1];
    var index = $(".swiper-slide").index($("#" + id));
    if (index != swiper.activeSlide) {
        swiper.swipeTo(index, 500, false);
    }
}
//On hashchange. This event not fired when page just loaded
$(window).bind('hashchange', function(event) {
    moveSwiper ()
});
//Main Swiper
swiper = new Swiper('.swiper1', {
    pagination : '.pagination1',
    onSlideChangeEnd : function () {
        history.pushState(null, null, "#!/" + $(".swiper-slide").get(swiper.activeSlide).id)
    }
});
//On Page Load:
moveSwiper ()

Also use "history", not "History"

[herzaso]

Hi Vladimir,
You are right, the code isn't executed unless you use the back button (meaning that the entire code is irrelevant).
However, I was not able to make it work with a non-direct hash. Is there any way to make it work with a normal hash?

BTW: I'm using a history plugin for jquery (hence the "History" instead of "history")

[nolimits4web]

My code works fine for me. About to make it work with normal hash, not sure, but try to add event.preventDefault() inside of haschange handler

[herzaso]

The event.preventDefault did not solve the issue. However, I have found that the problem is in the following code (in init function #411):

if(params.initialSlide > 0 && params.initialSlide < numOfSlides) {
_this.realIndex = _this.activeSlide = params.initialSlide;
if (_this.params.loop) {
_this.activeSlide = _this.realIndex-params.slidesPerSlide
}
if (isHorizontal) {
_this.positions.current = -params.initialSlide * slideWidth;
_this.setTransform( _this.positions.current, 0, 0);
}
else {
_this.positions.current = -params.initialSlide * slideHeight;
_this.setTransform( 0, _this.positions.current, 0);
}
}

There are 2 problems here:

1. the setTransform is called only if swiper got the initialSlide parameter (although the initialSlide could be set by the hash)
2. the setTransform is using only the initialSlide parameter in order to set the initial slide (although, again, this could be set by the hash)

By not calling the setTransform, the initial x-coordinate is presumed to be 0 although it might not be.

Bottom line, I managed to get around the issue by supplying the initialSlide parameter (not sure it's a bug though ... maybe a known-issue for folks working with the hash):

var hash = window.location.hash.slice(1);
var index = $(".page").index($("#" + hash));

swiper = new Swiper('.pages.swiper-container', {
initialSlide: index,
speed: 250,
freeMode: false,
onSlideChangeEnd: function() {
History.pushState(null, null, "#" + $(".page").get(swiper.activeSlide).id);
}
});

Thanks,
Ofir