Swiper Update to 5.3.6 & New Wrapper Class

In Elementor Core 2.9.0, we integrated an update to the Swiper.js library used in all of Elementor’s carousels (Core and Pro). Up to 2.9.0, the included Swiper version was 4.4.6. In Elementor 2.9, the Swiper library was updated to version 5. This version includes potentially breaking changes. Please read on for more information.

Why Did We Update?

As part of standard maintenance, we update our external libraries from time to time, including Swiper. Swiper 4.4.6 was released in December 2018, and many issues and features were added in the current 5.3.6 version.

Major Changes From Swiper 4.x

The biggest change, for Elementor, which was introduced in Swiper 5.0, was an inversion of the library’s breakpoints system. Up until Swiper 5.x, the breakpoint system worked on a max-width basis: meaning, for a given breakpoint (say, 768px), a given setting would be implemented on all screen widths under 768px.

In Swiper 5.x, the library author changed the breakpoints system to work on a min-width basis. Meaning, for a given breakpoint (e.g. 768px), the given setting would be implemented on all screen widths above 768px. There used to be an option to actively invert the breakpoint system (an optional parameter), but the library author removed that option for reasons unbeknownst to us.

It is important to understand – this is a breaking change for anyone using the Swiper library for their custom widgets. Please read the entire article in order to be sure you take the necessary action to keep your Elementor add-ons working properly.

New Wrapper Class for Swiper

Due to the changes in Swiper’s breakpoint system, and since Elementor’s breakpoint system is used on a max-width basis, we had to make sure that all of the breakpoint settings from all our widgets using Swiper would be inverted to match Swiper’s new breakpoint system.
Because of this, we created a wrapper for the Swiper library. The wrapper class receives the existing breakpoint settings from all of our widgets, and inverts them to a min-width setting, starting at a breakpoint of 0px.

Update: New Inversion Parameter in Swiper Options

Since Elementor Core 2.9.0 was released, we have received complaints from developers extending Elementor that we were too aggressive with how our wrapper handled Swiper instances. Elementor’s Swiper Wrapper only handles Elementor’s own breakpoints (including the custom breakpoints as configured in Elementor’s Style settings in the admin dashboard), and any other breakpoints get cancelled in the conversion process.

In order to restrain our wrapper a bit, we decided to condition our handling of breakpoints on a new parameter in the Swiper options: handleElementorBreakpoints. We called it by that name to emphasize that our wrapper will only invert Elementor’s breakpoints.

This means that the breakpoint conversion will only work if the breakpoint values (in Swiper’s breakpoint options, they are in fact the keys) you supply in the Swiper options are identical to the breakpoints defined for Elementor (our default breakpoints in conjunction with custom mobile and tablet breakpoints, if those have been defined).
Elementor’s default breakpoints are available as a Javascript object in the editor and frontend, and can be accessed at elementorFrontend.config.breakpoints.

Elementor’s default array of breakpoints:

{
 xs: 0
 sm: 480
 md: 768
 lg: 1025
 xl: 1440
 xxl: 1600
}

Here is an example of how to use the new parameter:

const swiper = new Swiper ( {
   breakpoints: {
      768: {
         slidesPerView: 2
      }
   },
   handleElementorBreakpoints: true
} );

Only if you include the new handleElementorBreakpoints option with true value in your Swiper options object, will Elementor invert the breakpoint settings you supply to your Swiper instance (again, as long as they are compatible with Elementor’s saved breakpoints). If you don’t include this parameter, the Swiper library will handle your breakpoints natively, meaning, as stated above, they will be implemented on a min-width basis.