Swiper Is Not Defined, but Functionality Works

Hello all. I’m getting an error in Firefox that my my (2) Swiper Sliders aren’t defined, and I’m not sure why.

Both sliders work, and the scripts are loading in order.

Did I miss something in my .JS code?

Here’s how I’m loading the scripts via my functions.php as well:

// SWIPER - Used for mobile friendly carousel
wp_enqueue_script( ‘swiperScripts’, ‘https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js’ );

wp_enqueue_script(‘swiperScripts’);

wp_register_style( ‘swiperStyles’, ‘https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css’ );

wp_enqueue_style(‘swiperStyles’);

Thanks!

PEN: https://codepen.io/brittany-golden/pen/mNRJzp

Error:

swiper-not-defined

Hi @birdiegolden, where is the script that would actually instantiate the Swiper? You should specify the swiper script as a dependency to make sure the scripts are getting loaded in the correct order… something like

wp_enqueue_script('my-app', './js/my-app.js', ['swiperScripts']);

BTW you’re currently enqueuing the script twice… I guess the first time should be wp_register_script()? This shouldn’t be a problem though, you can also enqueue scripts directly without registering them first.

Hi there, thanks for the response.

I’m not sure what you mean by en queuing twice, unless you mean the parent theme is also en queuing swiper. js files . The functions.php is en queuing the .JS first, then the .CSS.

I’ll try adding the script as a dependency, but as mentioned, the swiper carousel works just fine and one wouldn’t even notice the error unless the opened the console. It was my impression that if the scripts were out of order, this wouldn’t work at all.

Ultimately, I think there’s something wrong with my custom JS, but I’m not sure what :confused:

Thanks again, appreciate the second pair of eyes.

Here:

The 1st line should probably be a wp_register_script() call.

Ah sry I misunderstood you, I thought it was only working in the pen. Do you have a link to the page then? (You can also send me a PM if you don’t wanna post it here…)

I FINALLY figured it out! I should have tried this first (rookie mistake) but the plugin ASYNC was deferring the swiper scripts. I excluded it from the deferment and all is back to normal. Thanks for taking a look at this!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.