Identify Reference to Destroy & Re-Initialize Swiper in Elementor

问题

Elementor Pro (the WordPress page builder) integrates beautifully with Swiper, tying their GUI to the JS parameters and database content.

However, for my project, I need to make some changes to the Swiper "CoverFlow" skin Init parameters (show more slides, change the 3D effect facing direction...).

My hope is to to use the Destroy method of the Swiper API which looks like:

mySwiper.destroy(deleteInstance, cleanStyles);

Then I can initialize the Swiper again, with my own custom parameters. The challenge is that the way Elementor calls Swiper in frontend.js is a complex anonymous function that doesn't really allow me to know what "mySwiper" would be... On line 567:

this.swipers.main = new Swiper(this.elements.$mainSwiper, this.getSwiperOptions());

I would be so grateful if someone could please help me understand what "this.swipers.main" would translate to after Init so that I can destroy the swiper and initialize it again with my own parameters.

Obviously I cannot edit frontend.js itself as it is a plugin file that needs to be updated.

Extra points for whomever teaches me how to fish and what the methodology is to solve these types of puzzles for other similar situations.

回答1:

You can give an ID to the Elementor widget ex: slider1 and then with JS you can use:

var sliderInstance = document.querySelector('#slider1 .swiper-container').swiper;

After this you can call sliderInstance.destroy() wherever you want.

And if you want to initialize it again you can call:

var sliderInstance = new Swiper('#slider1 .swiper-container', {
    //options
});

来源：https://stackoverflow.com/questions/55053924/identify-reference-to-destroy-re-initialize-swiper-in-elementor

标签

scope

this

destroy

swiper

elementor