Elementor 2.7: Moving Sliders from Slick to Swiper

Library

Elementor has been using the Slick Slider library for various widgets and core functionality since the plugin’s early days. In addition to Slick slider, we also gradually introduced another slider library into Elementor, Swiper Slider. Elementor and Elementor Pro have been using Swiper for several widgets and other core functionality, such as lightbox gallery (browsing through an image gallery in lightbox mode).

Why we’re switching

Since we have been using both slider libraries in conjunction for a while, we could compare our experience with each of them in terms of performance, ease of use, and more. Swiper has proved itself to be more flexible, more performant, and more suitable for Elementor users’ needs.

In terms of loading speed and performance, using two different slider libraries simultaneously is inefficient. That is why we have decided to deprecate our usage of Slick slider.

In the upcoming 2.7.0 versions of Elementor and Elementor Pro, the following widgets and features will be using Swiper instead of Slick:

  • Slides widget (Elementor Pro) 
  • Image Carousel widget (Elementor)

Repercussions of the switch

We are aware that our formerly Slick-based widgets don’t offer some of the built-in features available in the Slick library, so some users have developed addons that extend existing widgets’ Slick-based functionality to include more options. If these options are based on Slick slider’s API, they will most likely not work anymore starting from Elementor 2.7.0.

If your site does not use any add-ons that extend Slick’s functionality in Elementor’s existing widgets, you would not have to take any action – this switch would be completely transparent to you.

We will still include Slick as part of Elementor’s external libraries for a while in upcoming versions, to maintain compatibility with older versions in cases of incompatibility between the free version of Elementor and Elementor Pro. When we fully deprecate Slick from Elementor, including removing it from the included external libraries, we will publish another official update.

Potential Issues and how to address them

There are some potential pitfalls that should be considered for existing websites that use any of the Slick-based widgets listed above. The following paragraphs contain examples of such potential issues. 

Once Elementor 2.7.0-beta is released, We encourage you to use and test any effects this change might have on your websites.

Analytics – Google Tag Manager and more

If you use Google Tag Manager (GTM),  and you have attached GTM triggers to a Slick-based slider’s slide/click events, these triggers will most likely not work with the new Swiper-based versions of our widgets. Element class names are different, as well as some of the HTML markup of the widget. See the Swiper API documentation for information on the library’s methods, element class names and more.

Same goes for any other analytics services – if you have attached any event triggers to Slick-related elements, these would have to be adapted to the new Swiper-based structure.

In order to mitigate this issue, you would have to adjust your analytics platforms’ triggers to work with the new Swiper-based versions of our widgets.

Slick-based addons and extensions

If your site has any add-on plugins that add/extend any functionality of Elementor’s Slick-based widgets (as listed above), these add-ons will most likely not work starting from v2.7.0. However, if you or your developers were the ones who coded those Elementor-Slick extensions, we suggest updating those extensions to work with the Swiper library. The vast majority of features which exist in the Slick library also exist in the Swiper library but are probably implemented differently. Check the Swiper API documentation for more information on how different slider features are implemented in Swiper.

Author

Ohad Raz
Ohad Raz

6 Responses

  1. Since the switch to swiper it is not possible to change the horizontal position of the slider when you put in a value for the slider padding. The slider stays centered… Without a padding value the slider changes the horizontal position. Please fix this.

  2. Swiper slider is not working smoothly. It is coming properly in editor mode but in page, it is showing only one image/slide and dots are also not displayed. It works only by swiping in desktops/laptops.

  3. Super not happy abut this. Not using Slick and have deact. all plugins not vital. Cannot roll back Elementor version ?? and errors showing on every page of a WOO site now.

Leave a Reply

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