Swiper collapses on route change

[nataliawww]

Using swiper version 3.1.3 with vue & nuxt

When rendering a new route, you can see the swiper collapse, I guess because it's being destroyed on beforeDestroy?

Here's a video showing the issue
https://streamable.com/mthnx

[aligajani]

Interesting

[bgondy]

I have a similar issue with <transition> component in a parent component. Removing beforeDestroy seems to do the trick

[hoektoe]

Is this the same issue as above? How to resolve this?
Check the bottom image which is also in slider become as big as whole container

https://streamable.com/fp3fa

@bgondy could you elaborate what you did to resolve this issue? or is it something which needs to be fixed within the swiper codebase?

[rubenmeines]

I am having the same issue. I have links inside the swiper, so it will start routing when I click on a swiper-item. Then before my page transition, the swiper resets and goes back to the start.

I am using nuxtjs.

[rubenmeines]

@nataliawojtkowska
I think you can fix that issue by not using the "spaceBetween" option but use margins in your css. If not you can also try the option below which will not destroy your slider and keep the settings.

@hoektoe @bgondy
I fixed it by using the mySwiper.destroy(deleteInstance, cleanStyles); and setting the "deleteInstance" and "cleanStyles" to false on mount and then initialising it again.

HTML:

JS:

Check also http://idangero.us/swiper/api/
and search for: mySwiper.destroy(deleteInstance, cleanStyles);

[rubenmeines]

If you want to keep your slide on the same position as when you leave the page, you can check out:
mySwiper.progress and mySwiper.update();

You could use mySwiper.progress to save the progress in your store before you leave the page and then when you come back on the page where your swiper is you can use mySwiper.updateProgress() to update the position in the mounted() function

[bitpunk]

I have the same issue and tried to fix it with the destory/init solution mentioned before.
I seems to work but the navigation stops working. The navigation classes in the props are just fine.

[guins]

I created a pull request to fix this issue. Let me know if it works for you !

[hjujah]

Having the same issue on nuxtjs... Any updates on this?
Btw, I solved it by adjusting the swiper.js file, but still looking for a batter / more proof solution...

[lockieRichter]

@guins I've implemented your fix and it works for me, the pull request has failed checks because the CI job failed.

[nonlinearcom]

I had the same problem using page transitions on nuxt.
My temporary fix was commenting swiper.destroy && swiper.destroy(); on dist/ssr.js

[or2e]

.swiper-container{ opacity: 0 }

mounted() { this.$nextTick(() => { this.swiper.el.style.opacity = 1 }) }

[ilero]

I had the same problem when using SPA.

i used this: vue-awesome-swiper

i tried add an event like this:

option： {
on: {
beforeDestroy: function(){
this.params.scrollbar.el = "";
}
}
}
Problem may be solved, but I don't know if there are any other bugs.

[leopoldkristjansson]

Is this the same issue as above? How to resolve this?
Check the bottom image which is also in slider become as big as whole container

https://streamable.com/fp3fa

@bgondy could you elaborate what you did to resolve this issue? or is it something which needs to be fixed within the swiper codebase?

Having the same issue as this, using Nuxt.

[kyalha]

@leopoldkristjansson I have the same issue and the PR has not been merged so in the meantime, you can use my colleague' s dirty solution by adding to the Swiper option to overwrite the destroy function:

init: (function() { // @ts-ignore const prev = this.destroy if (prev != null) { this.destroy = function() { prev.apply(this, [true, false]) } } })

[travbus]

I find keep alive works good for keeping presentation between changes routes. If you populate slides when the component is created. However if you populate when the component is activated. So updated everytime you go back to that route.. issues happen like first slide is visible but the rest of the slides are not but are still in the dom.

[arcs-]

The temporary fix from nonlinearcom seems to work for me too, however, instead of commenting out the part I just delayed it, so the swiper gets destroyed but only after the transition

in /node_modules/vue-awesome-swiper/dist/ssr.js => unbind()

setTimeout(function() {
  swiper.destroy && swiper.destroy();
  delete vnode.context[instanceName];
}, 1000);

[abeleev]

Solution for me

swiper.fixedDestroy = swiper.destroy;
swiper.destroy = () => swiper.fixedDestroy(true, false);

[jqweryjson]

mounted() {
const swiperContext = _.get(this.$refs, 'slider.swiper'); //lodash get ref

  if (swiperContext) swiperContext.destroy = swiperContext.destroy.bind(swiperContext, true, false);

},

In my case i use bind - because context was lost

[sebastianjung]

This seems to work for me as it overrides the default destroy function:

swiper.destroy = () => {}
or
this.swiper.destroy = () => {}
depending on your implementation

[leopoldkristjansson]

Using the solution from @sebastianjung works for me:

  mounted() {
    this.mySwiper.destroy = () => {};
  }

<div v-swiper:mySwiper="swiperOptions">...</div>

[surmon-china]

Silence v4.x, you can control the destory params by props.

<swiper
  :options="swiperOptionsObject"
  :auto-update="true"
  :auto-destroy="true"
  :delete-instance-on-destroy="true"
  :cleanup-styles-on-destroy="true"
  @ready="handleSwiperReadied"
  @click-slide="handleClickSlide"
/>

Upgrade to v4.x please!