Swiper: Route issue in History API

[jigneshbhavani]

This is a (multiple allowed):

• [x] bug
• [x] enhancement
• [ ] feature-discussion (RFC)

• Swiper Version: 4.5.1.
• Platform/Target and Browser Versions: all

What you did

I'm using History API. Here is my Swiper js code:

var swiper = new Swiper('.swiper-container', {
    spaceBetween: 50,
    slidesPerView: 1,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    pagination: {
        el: '.swiper-pagination',
    },
    history: {
        key: 'slide',
    },
});

My article URL is something like this https://example.com/article/article-slug.

Expected Behavior

On changing the slides URL should change to https://example.com/article/article-slug/slide/slide2.

Actual Behavior

Instead, It's removing my article-slug from URL and changes to https://example.com/article/slide/slide2 or https://example.com/article/slide/slide3.

It should append the history key to URL instead It seems to be removing the last slug and appending history key to URL.

[madshostrup]

I have the same issue but only the first time I swipe

[silllli]

I have similar issues with it. On every even slide, the key is not used by Swiper and the URL will only consist of the data-history value. All odd slides use the correct URL.

It looks something like this:

example.com/all-the-slides/slide-1
example.com/slide-2
example.com/all-the-slides/slide-3
example.com/slide-4
example.com/all-the-slides/slide-5

[silllli]

Well I found out where the problem is. The setHistory() method of History checks whether the key is currently in the window.location.pathname (here is the line). Only if it's not, the key will be added to the data-history value. The key should however always be added to the value, because it will be used as an absolute path.

[silllli]

Sorry—the current code should actually work. The real question is: why is the value not treated like a relative URL (as it's supposed to)?

[ilkome]

It's work ok when I have last / in url
works https://website/slider/
works but after second swipe https://website/slider

[ilkome]

The official example also have problem https://swiper-demo-33-history-api.stackblitz.io

[denzo]

I'm experiencing the same issue and was wondering if there's a workaround?

[denzo]

@jigneshbhavani I was wondering if you have a the issue happening in an application where you already have a some sort of client side Router that manipulates the history state?

[silllli]

I'm experiencing the same issue and was wondering if there's a workaround?

This is hacky and gets overwritten on Swiper updates or fresh installs, but fixes the problem: manually forcing the ‘key’ to always be added to the URL by changing these lines in the History module (history.js) from

if (!location.pathname.includes(key)) {
  value = key + "/" + value;
}

to this (for example)

if (true || !location.pathname.includes(key)) {
  value = key + "/" + value;
}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[silllli]

It does seem to work in the updated history demo.