Swiper is not defined Elementor 3.5

HI,

Can you send me your site URL?

It’s on localhost.
All things works good. Just by below method, Elementor not load swiper.js (and probably other libs js).

elementorFrontend.hooks.addAction( ‘frontend/element_ready/widget’, function() {
var swiper = new Swiper(carouselContainer, carouselSettings);
});

I rollbacked to 3.4.8 and it’s works.
What happened in V3.5 for js hooks?
I couldn’t find anything in changelog.

Me too facing the same issue after new update, If I disable Improved Asset Loading(Settings > Experiments) works fine. It looks like we need to load the Swiper JS, when I check the core I can confirm Elementor now checking for this, like this(here elementor/includes/frontend.php):

if ( ! $this->is_improved_assets_loading() ) {
			wp_register_script(
				'swiper',
				$this->get_js_assets_url( 'swiper', 'assets/lib/swiper/' ),
				[],
				'5.3.6',
				true
			);
.......
}

So I have tried get_script_depends() like below:

public function get_script_depends() {
return [ 'swiper', 'slider-script' ];
}

not working,
also tried adding ‘swiper’ as a dependency when we register the custom javascript file , but then the javascript file doesn’t even load.
array( 'jquery', 'elementor-frontend', 'swiper' )

@ozyeger Any advice

Hi,

Try to follow this troubleshooting method that I made: (It’s quite general, but maybe it will tell us something.)

Please make sure that all of your Plug-ins and Theme are updated.
Sometimes it isn’t obvious that there is a plugin update available. Go to WordPress Dashboard > Updates and click the Check Again button to be sure.
After you checked that you are really updated to the latest versions, and the issue still occurring:
Please deactivate all your plugins besides Elementor and see if it helps. If it solves the issue reactivate them one by one to find the culprit. If it didn't help, switch your theme (temporarily) and see if it makes any difference.
Please also regenerate the CSS via Elementor > Tools > Regenerate CSS on your WordPress Dashboard,
then make sure that you clear:
your WordPress cache (your WordPress plugin if you have one), your server cache (if you have one. In this case, you can contact your hosting provider).
Please Delete Elementor, then reinstall it.

• This reply was modified 3 years, 3 months ago by Elementor Team.

Your advice was not effective.
The problem is with Improved Asset Loading in V3.5. I have no problem with previews versions.

This helped me: 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 );
}

@dehkadehwp Your codes work great.
Thank you

Hi everyone.
How to insert this code???
I’m always getting syntax error, unexpected ‘Swiper’ (T_STRING)
I’m inserting it in my function.php child theme file. Is it correct??

I’ve named my widget sliderhome and i’m getting error on the second line.
This is the code i’m using

if ( 'undefined' === sliderhome ) {
  const asyncSwiper = elementorFrontend.utils.swiper;
 
  new asyncSwiper( swiperElement, swiperConfig ).then( ( newSwiperInstance ) => {
    console.log( 'New Swiper instance is ready: ', newSwiperInstance );
 
    sliderhome = newSwiperInstance;
  } );
} else {
  console.log( 'Swiper global variable is ready, create a new instance: ', Swiper );
 
  sliderhome = new Swiper( swiperElement, swiperConfig );
}

• This reply was modified 3 years, 2 months ago by ivanverona1.
• This reply was modified 3 years, 2 months ago by ivanverona1.
• This reply was modified 3 years, 2 months ago by ivanverona1.

@ivanverona1 first you should not change this
if ( 'undefined' === typeof Swiper ) {

and the code should be inside elementorFrontend.hooks.addAction callback

Hi @salihkulangara
I did like this and i still getting error

elementorFrontend.hooks.addAction( 'init', function() {
  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 );
	}
} );

Can you write me the correct full code please. I’m in trouble.
Thanks to reply me.

• This reply was modified 3 years, 2 months ago by ivanverona1.
• This reply was modified 3 years, 2 months ago by ivanverona1.

@ivanverona1 you are doing it wrong again. please check the Elementor developer documentation, here is how you register the widget handler – https://developers.elementor.com/building-a-simple-custom-widget-with-javascript/

see the section: Registering the Widget Handler with Elementor
you can try try this way:

jQuery( window ).on( 'elementor/frontend/init', () => {
   const addHandler = ( $element ) => {
      //here you define your swiperElement, swiperConfig 
      //then use the code 
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 );
}
 };

   elementorFrontend.hooks.addAction( 'frontend/element_ready/content-toggle-button.default', addHandler );
} );

• This reply was modified 3 years, 2 months ago by Salih K.
• This reply was modified 3 years, 2 months ago by Salih K.

Hi again @salihkulangara, nothing to do.
i never used javascript code. This is what i’m doing and nothing works.
Basically i’m sure that i’m wrong.
In Elementor editor i’ve added to my home page a posts list widget and i’ve enabled the slider option.
As you can read in this code i’m using imageCarousel.data as instance and i’m sure is definitly wrong what i’m doing.
At the end of the code i’ve changed the addaction hook with the swipercontainer class and i don’t know if is right.
Then i dont’t even find how to declare the right handler.
Can you please sort me out from this and write the correct code for me?
Until Elementor 3.4.8 everything was working perfectly.
I’m getting crazy by three weeks with this.

?>
<script>
jQuery( window ).on( 'elementor/frontend/init', () => {
  const imageCarousel = jQuery ( 'sliderhome .swiper-container' ),
  swiperInstance = imageCarousel.data( 'swiper' );
  swiperInstance.slideTo( 0 );
      //here you define your swiperElement, swiperConfig 
      //then use the code 
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 );
}
 };

  elementorFrontend.hooks.addAction( 'frontend/element_ready/swiper-container', addHandler );
  } );
</script>
<?php
} );

• This reply was modified 3 years, 2 months ago by ivanverona1.
• This reply was modified 3 years, 2 months ago by ivanverona1.

I am sorry, I could not figure out what you are up to, the main thread of this discussion was about Swiper undefined issue happening on your custom widget, ie widget is created by you, so you can easily fix the said issue by loading the Swiper in the new preferred way as Elementor suggests.

Here I think you are using a third party plugin, and you want to fix the issue. If that is the case I dont think that will be possible, or you may have work a little hard, otherwise you may have to contact the plugin author.

Yet, a few points:
in the code you provided, the swiperInstance should be the Swiper container class name, like below:
swiperInstance = ('.home-slider.swiper-container')

Other thing, for me, I was able to do a quick fix by just disabling the Improved Asset Loading feature, for this you can check Elementor > Settings > Experiments > Improved Asset Loading – make this inactive, by the latest update this experiment by default is active, By making this inactive Swiper will be available globally all time.

• This reply was modified 3 years, 2 months ago by Salih K.

@salihkulangara i’m not using third parts plugins.
I’m only using the elementor posts default widget.
Inside the editor, in the widget general tab settings i’ve only enabled the option to display the posts as slider and after every update from the 3.4.8 version, the arrows of the slider are stopped to be displayed correctly.
I only see two blank dot instead them.
I’ve even tried to disable the improved asset option but nothing change.
Anyway i was keeping enabled this option even in the 3.4.8 version.

• This reply was modified 3 years, 2 months ago by ivanverona1.
• This reply was modified 3 years, 2 months ago by ivanverona1.