✅ ♿ Add Keyboard navigation and Pagination Styles to the Image Carousel

[qwik3r]

Prerequisites

• I have searched for similar features requests in both open and closed tickets and cannot find a duplicate.
• The feature is still missing in the latest stable version of Elementor ( Elementor Pro )

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

Additional options for image carousel

Describe the solution you'd like

Swiper has additional options such as keyboard navigation and pagination styles. It would be great to be able to select if you want dots, factions (e.g. 4/5 images) or the progress bar.

Describe alternatives you've considered

You can try to hack the API a bit by destroying the swiper instance and adding your own options but in my experience this isn't very stable. Case in point a recent update from Elementor to the swiper library broke my code. It's better if these additional options are built in.

Additional context

Elementor is using a much outdated version of Swiper, and even though the beta just released up to version 8.4.5 it's STILL behind. There are TONS of options that could be used but are not currently available.

[mbrozekkrk]

I don't understand why it's not implemented from the beginning. To have ability to customize the swiper with all the swiper's parameters that are available. Now I can't even put pagination in other component...

[m1ga]

you can access and change all settings with JS https://developers.elementor.com/expose-swiper-in-elementor/

[mbrozekkrk]

I read this. How can you change pagination container using this? I didn't succeed. I can't access the instance before initialization, and after even if I run update it doesn't work on pagination or navigation containers. sob., 15 cze 2024, 02:13 użytkownik Michael Gangolf < ***@***.***> napisał:

…

you can access and change all settings with JS https://developers.elementor.com/expose-swiper-in-elementor/ — Reply to this email directly, view it on GitHub <#21388 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AJCG6LCZ4Y6M4RDPAGRQPV3ZHOBMFAVCNFSM6AAAAABJK6I6BCVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TONZZGMYTA> . You are receiving this because you commented.Message ID: ***@***.***>

[m1ga]

to move the pagination you can just use JS. e.g. with jQuery jQuery(".swiper-pagination").appendTo("#newPaginationDiv");

[mbrozekkrk]

I did :) but that's a workaround, not really changing the slider. And it could be in options easily. sob., 15 cze 2024, 18:02 użytkownik Michael Gangolf < ***@***.***> napisał:

…

to move the pagination you can just use JS. e.g. with jQuery jQuery(".swiper-pagination").appendTo("#newPaginationDiv"); — Reply to this email directly, view it on GitHub <#21388 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AJCG6LDPFAVAFXG7S2IMQN3ZHRQTDAVCNFSM6AAAAABJK6I6BCVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TOOBSGU4DS> . You are receiving this because you commented.Message ID: ***@***.***>

[m1ga]

it would be easier if you reply in the thread and not always create a new answer 😉
I don't know what you are trying to do but as mentioned before you can run all parameters with JS e.g.

document.querySelector(".swiper-pagination").style.display = "none";
swiper = jQuery ( ".swiper" ).data("swiper");
swiper.destroy(false)
new Swiper(".swiper", { pagination: {el: document.querySelector("#newPaginationDiv")}})

and that will create a new slider of your old slider but using #newPaginationDiv for your pagination. Keep in mind: none of the styles will work as the pagination should be a child of the swiper container.

[nicholaszein]

Hey everyone!

We have great news! 🙌

📢 We're happy to announce that this feature was released with Elementor v3.26.0! 🥳

✅ Feel free to check it out and update your plugin to the new version!

Check the changelog for more information:
Changelog of Elementor and Elementor Pro

Cheers 🥂