How i can destroy and reinit slider?

See original GitHub issue

I need use slider, only on mobile devices. How i can destroy, and after reinit slider? Im trying destroy this.sliderZimmer.destroy(true, true) and slider destroying fine. But if after i try to init this.sliderZimmer.init(). Script give me an error.

Issue Analytics

State:
Created 4 years ago
Comments:5 (1 by maintainers)

Top GitHub Comments

2reactions

surmon-chinacommented, Mar 24, 2020

The author of Swiper has stated Swiper does not support this action:

“You need to recreate instance with calling new Swiper, swiper.init() won’t have effect after destroying”

I recommend using v-if to control the destruction and initialization of Swiper inside the component.

e.g.:

<swiper v-if="renderSwiper">

shouldBeDestroy() {
  this.renderSwiper = false
},
shouldBeWork() {
  this.renderSwiper = true
}

0reactions

TakCastelcommented, Oct 8, 2020

Destroying the swiper doesn’t mean making it disappear, we could still need to display the slides; without the swiper behavior.

Top Results From Across the Web

iDangerous Swiper, subsequent destroy() and reInit() methods

I suspect the solution probably does involve a destroy() call, but I'm having a hard time seeing how this would work for a...

Swiper :: How to destroy/ReInitialize with 0 slides #502 - GitHub

1. Your clear previous images in gallery, not sure how you do it, but you can do that with $('.swiper-wrapper').html(' ...

Slick slider destroy and reinit

Slick slider destroy and reinit. The best way is you should destroy the slick slider after reinitializing it. Slick slider acessability.

Swiper Hide Problem (Destroy & Re-create) Basic - CodePen

1. //Swiper Initialization ; 2. new Swiper('.swiper-container', { ; 3. // Optional parameters ; 4. observer: true, ; 5. observeParents: true,.

slick destroy - CodeSandbox

import $ from "jquery"; · import debounce from "lodash.debounce"; · import "slick-carousel"; · $(".carousel") ·.on("destroy", function(_, slick) { · const reinit = ...