🔗 Please add "Free Mode" to every Carousel + Slider!

[SolunaCG]

Prerequisites

• I have searched for similar feature requests in both open and closed discussions and cannot find an existing request.
• I have verified that the feature is still missing from the latest stable versions of Elementor or Elementor Pro.

What problem is your feature request going to solve? Please describe..

The swiper.js library has a module called "Free Mode". I´d love to see this available in Elementor! When "assisting" with the problem solving of #23857 I realised the Elementor slider really misses the "Free Mode" module which would be great to have in Elementor!

Describe the solution you'd like.

https://swiperjs.com/demos#freemode

The solution would probably be fairly easy. It´s just an implementation of the "Free Mode" that already comes with swiper.js

Describe alternatives you've considered.

Unfortunately there aren´t any alternatives.

Additional context

No response

Agreement

• I agree that my request may be closed without action if it doesn't meet all the requirements.

[m1ga]

you can change any property on the swiper using https://developers.elementor.com/expose-swiper-in-elementor/
just make sure to use the code from the latest comments as the article is 4 years old and some code changed during that time

[SolunaCG]

@m1ga
Thanks a lot for showing me that article! I´m not very experienced with custom code yet. Could you maybe help me figuring out how this works? Many comments in that article say that it´s not working for them.

[m1ga]

swiperInstance = jQuery ( ".swiper" ).data( "swiper" );
swiperInstance.slideTo(2);
swiperInstance.update();

is one example where you get the swiper instance and can run their methods and so on. And then you use the parts from the swiper documentation that you've posted.

[SolunaCG]

@m1ga
Sorry that I need to ask again :( You´ve been very helpful so far but because of my pretty much non-existent programming skills I still can´t figure it out... It´s probably because I´m accessing the wrong selector or because I don´t know how the "Free Mode" actually looks like when added the way you showed.

https://www.i-like-penguins.de/slider-test/

Here is a test-page that I created a while ago where I´m still trying to make the Carousel widget have the free mode... What´s also very weird is that the loop carousel behaves a lot better (much smoother) when dragging and scrolling. But I guess that´s a different topic :3

Is it somehow possible that you could tell me how to make the "free mode" work in my example? I guess then I´d rather be able to understand it and how to transfer that solution to my clients sites.

Thanks a lot in advance! <3

[m1ga]

Can't help you with the freeMode, sorry. But your code isn't working because you run it too early. Just check the devtools error message.
When you site is loaded paste this in the devtools console:

swiperInstance = jQuery ( ".swiper" ).data( "swiper" );
swiperInstance.params.centeredSlides = true;
swiperInstance.update();

Then your slider starts in the middle. You have to figure out the rest.

[SolunaCG]

That already helps a lot! Thank you!! 😊

[nicholaszein]

This request was also mentioned in:

• 🔗 Please add "Free Mode" to every Carousel + Slider! #24814