Elementor Swiper Slider: How It Works and How to Fix It

Featured image: Elementor Swiper slider not working, a console showing Swiper is not defined above three empty slide outlines

Swiper is the JavaScript library that powers every carousel in Elementor: the Image Carousel, Media Carousel, Testimonial Carousel, Loop Carousel, and every third-party Elementor carousel widget you’ve installed. It’s not an Elementor feature. It’s an open-source slider library that Elementor bundles.

Knowing that changes how you debug a broken carousel. When a slider stops working, the problem is almost never the widget. It’s that Swiper didn’t load, didn’t initialise, or initialised before its container had a width.

Quick fix: slider stopped working after a plugin update

If you’re here because a working carousel suddenly died, try this before reading anything else:

  1. Open your caching or optimisation plugin.
  2. Find the JavaScript settings: Combine JS, Defer JS, Delay JS.
  3. Turn all three off. Clear the cache. Reload the page.

If the carousel comes back, JS optimisation broke it, and the fix is an exclusion rather than leaving optimisation off. Exact exclusions further down.

What Swiper actually does

Three nested elements. A container, a wrapper inside it, and slides inside that. Swiper reads the container’s width, calculates how much to move the wrapper for each slide, and applies a CSS transform on the wrapper. The slides never move individually; the whole strip slides underneath a window.

Which is why two categories of bug dominate:

The script didn’t run. Nothing initialises, so you see all the slides stacked or in a row with no interaction. Swiper’s CSS is usually still there, so it looks half-styled rather than plainly broken.

The container had no width when it measured. Swiper calculated against zero, so slides overlap, sit at the wrong size, or the track jumps. This is the tab and accordion bug: a carousel inside a hidden panel measures itself while hidden.

The five things that break Elementor carousels

1. JavaScript combining and deferring

The most common cause by a wide margin.

Swiper has to be defined before the inline initialisation code runs. Combining JS reorders files. Deferring pushes execution past the inline call. Delaying JS holds the library back until user interaction, by which time the init already fired and failed.

Open your browser console. If you see Swiper is not defined or Cannot read properties of undefined, this is your problem.

Fix: exclude the swiper handles from optimisation rather than disabling it wholesale. In LiteSpeed Cache that’s under Page Optimization → JS Settings. Add:

swiper
elementor-frontend
jquery-core

One thing people miss on LiteSpeed: there are separate exclusion fields, and Guest Mode has its own. If you only fill the main JS Excludes box, logged-in users see a working carousel and logged-out visitors don’t, which is exactly the bug that survives testing, because you’re logged in while you test. Put the same exclusions in the Guest Mode field.

WP Rocket: File Optimization → Excluded JavaScript Files, plus the same strings under Delay JavaScript Execution. Autoptimize: Extra → Exclude scripts from Autoptimize.

2. Carousel inside a hidden container

A carousel in a tab, accordion or off-canvas panel initialises while the panel is display: none. Width reads as zero, and the maths is wrong from the first frame. Open the tab and you get overlapping slides or a track that won’t move.

Fix: most widgets expose an “observer” setting. Turn it on and Swiper watches for size changes and recalculates. If yours doesn’t, put the carousel in the first tab, which is visible on load.

3. Loop mode with too few slides

Loop works by cloning slides to fake the wrap-around. It needs at least twice the slides-per-view count to have enough to clone. Four slides at three-per-view produces a visible jump, blank gaps, or a track that stops halfway.

Fix: add slides, or turn loop off. There’s no setting that makes a short loop smooth.

4. Two Swiper versions on one page

Elementor bundles a version; some addons bundle their own. Both register the same global. Whichever loads second wins, and if a widget was built against a different API, it breaks, often with an error about a method that doesn’t exist.

Fix: in the console, run Swiper.version. Then deactivate addons one at a time until it stops changing. Well-behaved plugins reuse Elementor’s copy rather than shipping their own.

5. Lazy loading fighting the slider

Aggressive image lazy loading, especially a separate lazy-load plugin on top of the theme’s, can leave slide images at zero height until they scroll into view. Except they never scroll into view, because they’re on a horizontal track. Result: a carousel of empty boxes.

Fix: exclude the carousel’s image class from the lazy-load plugin, or set explicit width and height on the images so the boxes reserve space.

How to check whether Swiper loaded

Thirty seconds, and it tells you which half of the problem you have.

  1. Open the page with the broken carousel.
  2. Open the browser console (F12, or right-click → Inspect → Console).
  3. Type typeof Swiper and press enter.

"function" means the library loaded, so your problem is initialisation: look at hidden containers or loop settings. "undefined" means it never arrived, and the cause is JS optimisation or a script that failed earlier in the chain. Scroll up in the console for the first red error, not the last; later errors are usually consequences of the first.

Swiper settings that matter in Elementor

Most widgets expose these under Carousel Settings, sometimes with different labels:

  • Slides per view: how many are visible; it’s the one setting that separates the free carousel widget breakdown. Set per breakpoint, always.
  • Slides to scroll: how many advance per click. Setting this equal to slides-per-view gives you page-style paging; setting it to 1 gives a continuous feel.
  • Speed: transition duration in ms. 300 to 500 for standard, slower for 3D.
  • Autoplay delay: pause on each slide. Set to 0 and it becomes a the Logo Slider widget.
  • Loop: infinite wrap. Needs enough slides, as above.
  • Auto height: container matches the tallest visible slide. Useful for uneven text, and it introduces a height animation that can look jumpy, so it’s worth testing rather than assuming.
  • Centered slides: active slide sits centre rather than flush left. Needed for coverflow to look right.

Where these appear in the free Image Carousel widget: the image carousel walkthrough has the panel screenshots.

Should you load your own Swiper?

No, in almost every case. Elementor’s copy is already on the page whenever a carousel widget is present, and adding a second one causes the version conflict above.

The exception is a custom slider on a page with no Elementor carousel widget at all. Then Elementor’s Swiper isn’t enqueued and you need your own. Enqueue it conditionally, on that template only, so you don’t reintroduce the conflict everywhere else.

Frequently asked questions

What is Swiper in Elementor?

Swiper is the open-source JavaScript slider library that Elementor uses for all its carousel and slider widgets. Elementor bundles it and enqueues it whenever a carousel widget appears on the page. Most third-party Elementor carousel addons use the same copy rather than shipping their own.

Why is my Elementor Swiper slider not working?

Nine times out of ten it’s JavaScript optimisation from a caching plugin: combine, defer or delay JS reordering the scripts so Swiper isn’t defined when the init code runs. Turn those three off and reload. If the slider returns, add swiper, elementor-frontend and jquery-core to the plugin’s JS exclusions instead of leaving optimisation disabled.

How do I fix “Swiper is not defined”?

The library didn’t load before the initialisation code ran. Exclude swiper from JS combining, deferring and delaying in your cache plugin. On LiteSpeed, add the exclusions to the Guest Mode field as well as the main one, otherwise it works for logged-in users and breaks for visitors.

Which Swiper version does Elementor use?

It changes with Elementor releases. Check it on any page with a carousel by opening the console and running Swiper.version. If that returns a different number than you expect, an addon is loading its own copy and overriding Elementor’s.

Why do my slides overlap or stack on top of each other?

Swiper measured the container at zero width, usually because the carousel sits inside a hidden tab, accordion or popup at page load. Enable the observer setting so it recalculates when the container becomes visible, or move the carousel to a panel that’s open by default.

Why does my carousel work when logged in but not for visitors?

Caching. Logged-in users typically bypass the cache and get unoptimised scripts, so the slider works. Visitors get the cached, combined and deferred version and it breaks. Test in a private window, and check for a separate guest or unauthenticated exclusion list in your cache plugin.

If it’s still broken

Work in this order: console check first (typeof Swiper), then cache exclusions, then deactivate addons one at a time in a staging copy. That sequence finds the cause in under ten minutes for almost every case.

Designs imported through the Widget Builder use the same Swiper build as the stock widgets, so these fixes apply to them too. The pricing page covers which of the twenty need a licence.

If you’d rather start from something known-good, every carousel widget on the Elementor Carousel Widgets page ships with the exclusion-safe script handles documented, and the Loop Carousel guide covers the dynamic-query variant of the same problems.

Picture of Roy
Roy
I'm Roy, part of the Master Addons for Elementor team. I write the tutorials, record the videos, and keep the documentation current, so you always know how to use every feature. I also handle support, so if you hit a snag, I'm the person who helps you fix it. Real answers, from someone who uses these tools every day.

Leave a Reply

Your email address will not be published. Required fields are marked *