Swiper V8 new instance problem

Resolved dehkadeh wp
(@dehkadehwp)

2 years ago
Hi there,

I developed some slider widgets for the Elementor and it is working fine with swiper v5 with this structure: https://developers.elementor.com/experiment-optimized-asset-loading/
```
if ( 'undefined' === typeof Swiper ) {
  const asyncSwiper = elementorFrontend.utils.swiper;
 
  new asyncSwiper( swiperElement, swiperConfig ).then( ( newSwiperInstance ) => {
    console.log( 'New Swiper instance is ready: ', newSwiperInstance );
 
    mySwiper = newSwiperInstance;
  } );
} else {
  console.log( 'Swiper global variable is ready, create a new instance: ', Swiper );
 
  mySwiper = new Swiper( swiperElement, swiperConfig );
}
```
But when I upgrade the swiper to v8 from the Elementor settings, it has a problem in the editor for the newly added widget.
- I corrected the swiper structure (swiper-container > swiper)
- If I save and refresh the editor, all swiper widgets working fine
- It is working fine in the site
- It just has a problem for the newly added widget in the editor
Actually the first added swiper widget works fine and this code run:
```
if ( 'undefined' === typeof Swiper ) {
  const asyncSwiper = elementorFrontend.utils.swiper;
 
  new asyncSwiper( swiperElement, swiperConfig ).then( ( newSwiperInstance ) => {
    console.log( 'New Swiper instance is ready: ', newSwiperInstance );
 
    mySwiper = newSwiperInstance;
  } );
}
```
But if I add the second swiper instance (slider widget) or duplicate the first widget, it does not have initialize and this part of code run:
```
else {
  console.log( 'Swiper global variable is ready, create a new instance: ', Swiper );
 
  mySwiper = new Swiper( swiperElement, swiperConfig );
}
```
It does not show any js error but the swiper does not initialize on it.

Can you please help me to correct the js code?

Thank you

Viewing 1 replies (of 1 total)

Thread Starter

(@dehkadehwp)

My Code

(function($){
    
    var widgetsHandler = function( $scope, $ ) {
      
        if ( $scope.find('.my-slider-container').length ) {
            var sliderSettings = '';
            var sliderContainer = '';


            if ( 'undefined' === typeof Swiper ) {
                const asyncSwiper = elementorFrontend.utils.swiper;

                new asyncSwiper( sliderContainer, sliderSettings ).then( ( newSwiperInstance ) => {
                    var swiper = newSwiperInstance;
                } );
            } else {
                var swiper = new Swiper(sliderContainer, sliderSettings);
            }
        }
    }

    $( window ).on( 'elementor/frontend/init', function () {
        elementorFrontend.hooks.addAction( 'frontend/element_ready/widget', widgetsHandler );
    });
	
})( jQuery );

Viewing 1 replies (of 1 total)

The topic ‘Swiper V8 new instance problem’ is closed to new replies.