Build Your Own Controls for Elementor Carousels (No Plugins!)

Nice tutorial

Thank you so much Man. It's my first time commenting on any video. Truly Loved it ! 😍😍

Hi! Thanks for the nice tutorial! my custom code doesnt work and i wondered if maybe you can look at it... Its for the custom loop builder (the new elementor widget) can you help?

This was amazing! Well done. Been wondering if I could use this tip for building an image carousel that slides based on an event on an image map. Eg. For showcasing real estate images based on floorplans with image maps of each room. Would you consider such a tutorial? Thanks

This a very nice video. Thanks. Is it possible to use elementor buttons instead of icons to control the carousel?

Can you explain what I have to do when I want to change parameters with this code?

Thanks a LOOOOOOOTTTTTTT!

Is it the same for the loop carousel?

This has been a great start working with swiper API for me though I need some help. Im trying to set 'realeaseOnEdges' to TRUE but just cannot get it to work. Any chance you could add some insight to this problem? Thanks

Is there a way to do this where instead of two arrow icons you have multiple icons like 4-6 of them and each icon pulls it straight to a specific slide?

Hi Chris, I am using this code on elementor loop carousel and its working very well, i am just facing two issues. Can you please guide me a bit?
When I give custom positioning to the icons they work but do not show in the main window ( i know they are working because i can see them int he edit window in the elementor backend, but the moment i remove the elementor edit window the arrows disappear. They do not show at all until i give them the default position.

the second issue is - i am using the carousel twice. I have put the code in the elementor custom code widget instead of html. So i am using the same css ids for both the carousels and their icons. The second carousel (duplicate one) is not working. The first one works fine. If i give the code in an html widget (like you have shown) separately for both carousels they work fine. Is it possible to avoid using two html widgets for two carousels and run them from the same code in elementor pro custom code widget?

Thank you, sir! It was an incredible explanation of the code.

Hello. The video helped a lot. Thank you.

tell me how to put dots anywhere?

Hi @KingGrizzly, thanks for this clear video. I tried to expand this to my loop carousel, by adding 2 icons to the loop carousel template. At first it seems to work fine, but after the first click/movement it freezes and doesn't work any longer. Would you have any suggestions here?

Does this work in the new nested carousel widget? I can't seem to get it to work.

Thanks for this tutorial. I has been really useful and saved me a lot of time! Also thanks for the code update. It worked perfectly after replacing swiper-container with swiper

OMG! Exactly what I needed. Thanks a million for sharing this solution. You rock! I was using the normal Slider widget instead of the Testimonial slider and Elementor does not have an option to change the arrow icon, so I was stuck with the ugly fat chevron icons.

It worked after I used Elementor v3.11+ with the 'Upgrade Swiper Library' experiment enabled, but its only working when I am logged in the site. Can you help please?

I have added the same code but its not working in others laptop

Hi! I got it to work, which is great! How can I make this code trigger to carousels at the same time?

Thank you King Grizzly!

I applied it to the Premium Addons carousel but seems not working. Any idea or recommendation?

I cannot get this to work, is there any change to loading the swiper in elementor?

Thanks a lot for the quick reply, I didn't see the update but after changing it, I still do not have the icon as an active button and no action. I will have look at it again. By the way is there any way to make carousel move by clicking anywhere to the right or left. Controlling the carousel by the cursor?

Thank you for the video. It really helped me!

Hello everyone, I did this code in to pages, in the first one it works. In the second one it works only when im logged in, but when I open it by being logged out (or in another browser or private window) it does not work, using F12 I found an error (Uncaught ReferenceError: jQuery is not defined) Any idea of how to fix this?

Hi can u create with headings also if i click heading one the 1st corausel will slide , if 2 heading then 2nd would be slide.

Hi there! It works great, i only have a doubt, Is there any chances that the inner animations on the slider can repeat it self every time I slide again into the slide?
Thank you so much for your time!

Thank you so much. You are a legend bro

Thank you so much for the tutorial, one question though: would there be a way to also position / style the bullet navigation individually?

Thanks for this. How might you incorporate parameters into this? Like Fade instead of slide?

what if you have multiple versions of this slider on your page? The next arrow doesn't work and the slides dont work with my 2nd carousel element. You have a solution for this case?

what if you have multiple instances of this carousel on your page? only the first next arrow is working in this case. Any quick solutions for this case?

great thank you!
just figured out, that the infinite loop isn't working. I have 4 elements and switching between them works fine. but after one round, I can't proceed from the 1st element onwards... any idea, how to solve this? infinite loop is enabled...

Bro i need help. I used this code many of my old works after updated to the elementor Version 3.21.8 , slider still works fine in desktop and responsive mobile view , but its doesn't works in Actual mobiles why this happened ?

video was thankfull but also want custom pagination type video like this video

i love you

Great tutorial , some question if I want to add scroll bar after butto how to do that?

Hi! I am running into an issue where the carousel navigation is working in the Elementor editor, but not on the live page. Any thoughts how to solve this?
I added the code to the Elementor custom code section. </Body> end with 'always load Jquery' applied. No cache plugins are currently installed.

Thank you in advance!

I'm using loop carousel for the blog posts. The JS code is not working, maybe need some changes? PLEASE HELP!

Huge thanks! This is a perfect step-by-step guide on how to do this. Was just what I was looking for.

Hi! Thank you for the tutorial. I am bulding a similar project but I want to link each slide to a unique button (5 slides each has a corresponding nav button). How would I need to modify this code to achieve that? Thanks in advance!!

This is a lifesaver. Thank you so much for giving this away for free.

I don't know why, but both the CSS and JavaScript/jQuery codes don't work for me. Maybe because of updates in the Elementor and the Swiper API?

Nice lesson! Thank you so much!