question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Swiper collapses on route change

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:2
  • Comments:22 (1 by maintainers)

github_iconTop GitHub Comments

12reactions
surmon-chinacommented, Apr 29, 2020

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!

7reactions
abeleevcommented, Dec 3, 2019

Solution for me

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

idangerous swiper issue with dynamic content - Stack Overflow
I have tested it with static content it's working fine, no need to resize the window but once I switch to dynamic content,...
Read more >
Swipe to Collapse => Swipe to Navigate : r/redditmobile
As some of you may have noticed, the latest version of the iOS app changed the default swipe behavior on comment pages.
Read more >
Swiper - slideable menu bootstrap 4 implementation - Laracasts
I would like to use swiper slide menu in my project built with bootstrap 4. ... class="navbar-collapse collapse justify-content-between" id="navbar5"> <form ...
Read more >
Swiper API
If false , then the only way to switch the slide is use of external API ... data-background="path/to/picture-3.jpg" class="swiper-slide swiper-lazy" > <div ...
Read more >
Use desktop stacks on Mac - Apple Support
On your Mac, swipe left or right on the stack using two fingers on the trackpad, or one finger on a Magic Mouse....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found