Swiper V8 new instance problem

  • Resolved dehkadeh wp

    (@dehkadehwp)


    9 months, 3 weeks 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 dehkadeh wp

    (@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.