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

[@kristofgheyssens3941]

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.

[@JillyCrystal]

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

[@KingGrizzly]

Excellent, so glad that it helped you!

[@check7282]

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

[@KingGrizzly]

Fantastic! Thanks so much for the comment, really pleased you liked it!

[@ChaoSmauZ]

Thanks for the explanation of the JS-Code! I learned something instead of just copy and pasting the code :)

[@KingGrizzly]

Excellent, so pleased to hear that!

[@RegularRebellion]

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

[@alexbasar4665]

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

[@KingGrizzly]

Without seeing your code or understanding exactly what you're trying to achieve, it's difficult to make any recommendations. We can take a look if you have a live page that we can test.

[@RichardPraschil]

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?

[@npc-br]

Bro, did you find a solution? I'm with the same problem, trying to make it work on a listing gris

[@xmakocode]

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?

[@KingGrizzly]

Have you made the changes mentioned in the update in the description below the video? And if you hit F12, do you see any JavaScript errors in the console?

[@techie-luqmanab]

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

[@KingGrizzly]

Very happy to hear this! Glad it helped!

[@sr_chimo]

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?

[@KingGrizzly]

Are you using a caching or performance plugin such as WP Rocket? It sounds like you have an issue with the order in which scripts are loaded. Possibly the loading of jQuery is being deferred/delayed. Try creating an Elementor 'Custom Code' snippet (go to 'Elementor -> Custom Code'), and placing your code there, set the Location to 'Body - End', tick the 'Always load jQuery' box, save your changes and set the Display Conditions to run on your page. This may help.

[@apeace]

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?

[@KingGrizzly]

Hi, thanks for watching, and glad the video helped! It's difficult to say what the problem is without seeing the page. I'm happy to take a look if you can provide a temporary login to your WordPress dashboard. You can contact me at '[e-mail]'.

[@apeace]

@@KingGrizzly Thanks for your prompt reply! I can imagine you are not able to help me out in more detail without access to the page, I've just sent you an email. Thanks in advance for your help, much appreciated. And once again, thanks for the great video.

[@KingGrizzly]

@apeace Thanks for getting in touch on email! I've taken a look at your page and hopefully fixed the issues. Let us know if that now works for you. All the best!

[@abhishekgarg1030]

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.

[@KingGrizzly]

Yes, you can do that. The code can be added to the click event of any element, not just icons or buttons. As long as the element has a CSS class or ID, and you reference that class or ID from the code, it should work.

[@danilobatista251]

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

[@irbis_rosh]

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!!

[@KingGrizzly]

Hi - thanks for watching! Do you mean you have five separate carousels, all on the same page, and each carousel has its own set of buttons that should only control that one carousel?

[@irbis_rosh]

@@KingGrizzly thanks so much for the quick response! I actually figured it out: i needed to use the .slideTo method and refer which button ID would respond to the slide number. Thanks again!

[@KingGrizzly]

Ah, OK, I think I see what you mean now. Glad you figured it out!

[@irbis_rosh]

@@KingGrizzly thanks again! Bonus question, if I may: is there a way to add an active state styling for a button depending on which slide the slider is? For example: we have 5 slides and 5 buttons, each button scrolls to a particular slide. Is there a way to make, say, button 3 red when the slider is showing the corresponding/linked slide? How would js and css adjustments would looks like? Many thanks!

[@KingGrizzly]

It would probably be awkward to do this over the comments, but you likely need to use a JS event listener on the slides changing, then style the corresponding button accordingly. Although this sounds very much like what the navigation dots on the carousel already do! You might be better off just styling those!

[@mobilaizer]

Does not seem to work with the Product Loop Carousel

[@KingGrizzly]

If you can provide some further information - what exactly is going wrong, whether you see any errors in the console, etc. then we'll be happy to help you troubleshoot.

[@mobilaizer]

@@KingGrizzly Hello KingGrizzly, the problem is strange. The code seems to work in the elementor page editor but when it is updated it does not work on a live site. I used your solution for image slider and it works. However the Product Loop doesn't. Hope this info helps

[@KingGrizzly]

@@mobilaizer It's difficult without seeing what errors you're getting in the console. Try hitting F12 and see if there are any errors shown (switch to the 'Console' tab). If it's working in the editor, it sounds like maybe jQuery isn't loading in time. If you're not already, try moving the code to an Elementor 'Custom Code' snippet, and checking the 'Always load jQuery' box. Failing that, try disabling any caching solutions you might be using (like WP Rocket). If none of that works, then we'd to see the console errors.

[@mobilaizer]

@@KingGrizzly Thank you so much for giving me the heads up on what could be wrong. This exceeds my knowledge and I will be looking for someone to take a look at it. I might post the solution here at some point. Thank again :)

[@KingGrizzly]

@@mobilaizer If you hit F12 and click the 'Console' tab at the top, then refresh the page, let us know if you see any errors and copy/paste them here. That might help us to identify the problem. Failing that, if you're able to give us a temporary login to your WordPress dashboard, I could take a look for you. Otherwise, good luck, and I hope you get it resolved. Let us know how you get on!

[@stefanniener3582]

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...

[@grietininis-x9k]

Hey, have you found the solution to that because I ran into the same problem?

[@vanleeuwenoriginals8461]

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. end with 'always load Jquery' applied. No cache plugins are currently installed. Thank you in advance!

[@KingGrizzly]

If you hit F12 to open the console, and reload the page, do you see any JavaScript errors? This might give some clues.

[@vanleeuwenoriginals8461]

@@KingGrizzly It says the following: 'Uncaught ReferenceError: jQuery is not defined at (index):542:2'

[@KingGrizzly]

@@vanleeuwenoriginals8461 Seems like jQuery is still not loading before your code is run. Without knowing about your hosting environment or any other factors that could be influencing it, it's difficult to say what the problem is. Try checking your host for any server-level optimisations that could be enabled and delaying the loading of jQuery. Failing that, rewriting it as ordinary JavaScript should fix the problem. Try asking ChatGPT to convert your code to plain JavaScript!

[@vanleeuwenoriginals8461]

@@KingGrizzly It turned out to be the server caching causing the problem. Thank you for your help once again.

[@rvarrazza]

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

[@KingGrizzly]

From what I remember, Premium Addons uses the 'Slick' library for its carousels, not Swiper. So unfortunately this approach won't work. You'd need to write equivalent JavaScript that makes use of Slick's API to achieve similar results.

[@diligentraders]

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?

[@KingGrizzly]

Yes, that should be possible. Instead of using 'slideNext' and 'slidePrev', you can use the 'slideTo' method, which will allow you to move to a slide with a specific index number. You can find out more here in the Swiper API documentation... swiperjs.com/swiper-api#methods--properties

[@franktielemans6624]

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

[@KingGrizzly]

That depends on exactly what you want to change. But if you take a look at the Swiper API's parameters section, you should be able to use the code examples provided there to extend the functionality and achieve what you want... swiperjs.com/swiper-api#parameters

[@franktielemans6624]

@@KingGrizzly Thx for the reply! I want to experiment with the effects. (flip, coverflow,..) Or create a vertical slider. Also is it possible to sync two elementor carousel widgets?

[@KingGrizzly]

If you mean sync them so that they both slide when you click a button, then yes, it should be possible to do that. You could experiment with assigning the same class name to two carousels, and then selecting the swiper target by class name rather than ID. Or, failing that, you may need to pass the carousel's ID as a parameter when you call getSwiperInstance on line 8, and then use that to set swiperTarget on line 4. That way, with every button click, you could call getSwiperInstance twice, once for each of your carousels, each time passing in a different class name/ID.

[@cryptoboggan139]

thx ! need a carroussel buttons witout logos, is it possible ? How to build it ?

[@KingGrizzly]

Yes, you can trigger the code by clicking any element, it doesn't have to be an icon or button. Use whichever widget works best for you.

[@vanleeuwenoriginals8461]

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

[@KingGrizzly]

Give your second carousel a different CSS ID - something like 'my-elementor-carousel-2'. Then change your function to this... function getSwiperInstance(carousel) { var swiperTarget = $(carousel); return swiperTarget.data('swiper'); } Then change each button's click event to fire on both carousels... $('#my-prev-element').on('click', function() { getSwiperInstance('#my-elementor-carousel .swiper').slidePrev(500, true); getSwiperInstance('#my-elementor-carousel-2 .swiper').slidePrev(500, true); }); $('#my-next-element').on('click', function() { getSwiperInstance('#my-elementor-carousel .swiper').slideNext(500, true); getSwiperInstance('#my-elementor-carousel-2 .swiper').slideNext(500, true); });

[@vanleeuwenoriginals8461]

Thankyou very much! Works perfectly!@@KingGrizzly

[@KingGrizzly]

@@vanleeuwenoriginals8461 Excellent! Glad it worked.

[@RichardPraschil]

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?

[@KingGrizzly]

Try using different class names or unique CSS IDs for each carousel, and ensure each block of code you use targets each one specifically by class/ID.

[@RichardPraschil]

@@KingGrizzly I'm doing that, question was more related to the script. For now I copied it 2 times and edited in my different ids. Believe this isn't optimal.

[@KingGrizzly]

@@RichardPraschil No, you're right, it's not the most efficient way of doing it. This video was only meant to cover a simple scenario. For multiple carousels like you've described, you would ideally have a single block of code that attaches an event listener to all the controls on your page, with each button then controlling the closest carousel when clicked. You could have a single block of code that achieves this by looping through all controls on the page, if they all share a class name.

[@RichardPraschil]

@@KingGrizzly thank you

[@rodlivz]

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

[@KingGrizzly]

Thanks for watching, and glad it helped! Yes, it should certainly be possible to slide the carousel based on any JavaScript event. If you have a specific use case and can summarise exactly what you're trying to achieve, we may certainly be able to give some pointers in the right direction.

[@Abhishek-n4p6r]

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

[@KingGrizzly]

Thanks for watching! What's the problem? If you let us know, we can take a look.

[@Abhishek-n4p6r]

The slider thing is only working when i see it in preview and if i open the same thing in others laptop or incognito mode the slider is not working.

[@KingGrizzly]

It's difficult to say without being able to see the page or logging into your WordPress Admin and taking a look. It could be an issue with caching if it works when you're logged in. If you're using any caching plugins, try temporarily disabling them.

[@jakkapongapitanapantawee7714]

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

[@KingGrizzly]

Sorry, I'm not entirely sure what you mean by a scroll bar? Do you mean another mechanism to control the same carousel? Or to scroll something else?

[@jakkapongapitanapantawee7714]

@@KingGrizzly I mean this one "swiper.scrollbar" I try to add el: ".swiper-scrollbar", but doesn't work (sorry for my english)

[@KingGrizzly]

@@jakkapongapitanapantawee7714 This isn't something I've tried, but certain features can only be enabled if you instantiate an entirely new instance of Swiper. For example, changing the transition effect to something different like a coverflow effect, or enabling the parallax effect, require you to do this. Take a look at our other video on enabling the parallax effect, and this may point you in the right direction on how to try this by instantiating a new instance of the Swiper object... kzbin.info/www/bejne/f4i7fpSIhNl4qMk

[@mshah]

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?

[@KingGrizzly]

It could be a caching issue. Have you tried clearing the server cache on your hosting platform? Also try clearing your browser cache by adding '?breakcache' to the end of your URL. If that still doesn't work, open the console by pressing 'Ctrl-Shift-J', switch to the 'Console' tab, refresh the page and see if there are any errors reported. It could also be an issue with the loading order of scripts, e.g. jQuery hasn't loaded yet when your code fires. If you're using Elementor 'Custom Code' instead of an HTML widget directly on the page, try ticking the 'Always load jQuery' box.

[@gokulkkd]

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 ?

[@KingGrizzly]

Hi. Unfortunately it's difficult to tell what your exact problem is without being able to see your sites. If you can provide a little more information about what issue you're experiencing, we can do our best to help.

[@gokulkkd]

@@KingGrizzly im sorry I just worked it with my local setup. U try the same code and please check this still works for mobile. For me it's doesn't working 😞.

[@KingGrizzly]

Yes, everything still works on mobile. There could be a number of reasons why it's not working for you, so unfortunately it's difficult to tell what the issue is without seeing your site.

[@gokulkkd]

@@KingGrizzly Thanks ur reply bro. Anyway finally I figured out the issue , the problem actually with Jquery code so I converted it to JS code, Now its works well. I really appreciated Your quick response. :)

[@jiantramadan8559]

Very well explanations! I found this really helpful for a beginner like me to understand about Js Thanks..

[@KingGrizzly]

You're very welcome! It's great to hear that it has helped you.

[@JV-uy8zz]

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

[@KingGrizzly]

You can change the carousel's transition effect directly on the Elementor widget's settings, although the options are more limited compared with the full range of effects that Swiper is capable of. If you want to use one of the Swiper effects that isn't supported by Elementor, it's possible, but a bit more complicated, because you can't just modify parameters. It's too significant a change, so you need to instantiate an entirely new instance of the Swiper object. If you're comfortable with some code, have a look at our video here - kzbin.info/www/bejne/f4i7fpSIhNl4qMk - which, although isn't quite the same thing, covers instantiating a new Swiper object to implement an effect not normally supported by Elementor. If you combine this with the full range of effects available in the Swiper API here - swiperjs.com/swiper-api - you should be able to follow the other video above and modify the parameters object to use the effect you want before instantiating the new Swiper object. Good luck!

[@JV-uy8zz]

@@KingGrizzly Thanks a lot for the direction. Appreciated.

[@originhaus]

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

[@KingGrizzly]

Yes, it should work in all the carousel widgets that use the Swiper library. If you haven't already, check the update about the 'Upgrade Swiper Library' mentioned below the video, and make sure you have implemented the change mentioned there.

[@MinimalRichi]

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

[@KingGrizzly]

Yes, it should be possible through CSS. You would need to examine the CSS classes that are used for the navigation bullets. There should be separate classes used so you can target things like the active bullet.

[@MinimalRichi]

@@KingGrizzly Wow that was quick. I thought about either manipulating the positioning of the existing bullets or rebuild it from scratch like you did with the prev/next buttons. Thank you for your input.

[@SteveHansen-vk7gj]

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

[@KingGrizzly]

No, it should still work fine, as long as you take note of the 'Update' comment at the top, as some class names did change a while back. Check for errors in the console which may give some clues (Ctrl-Shift-J and switch to the 'Console' view).

[@MiloszWarykiewicz]

Thank you so much. You are a legend bro

[@SteveHansen-vk7gj]

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?

[@KingGrizzly]

Not sure if you mean anywhere on the screen to the right or left, but yes, anything is feasible with some custom JavaScript code. It's not something you could do 'out of the box' though, unfortunately. At least, not that I'm aware of.

[@ВиталийДякин-д6д]

tell me how to put dots anywhere?

[@KingGrizzly]

You could try referring to them by class name, and positioning them through CSS (relative or absolute positioning), or, if you want more control over exactly where you place them, it might be easier to hide them altogether in the carousel's settings and just build your own. You could trigger the previous/next slides from them in exactly the same way as you're doing with the icons.

[@ВиталийДякин-д6д]

Thank you. @@KingGrizzly

[@fabriciobraga8657]

Nice lesson! Thank you so much!

[@daayaniyaa]

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?

[@KingGrizzly]

Hi there - thanks for watching, and glad it helped! Where are you placing your icons? In a completely separate container? Or in the same container with the loop carousel? It could be that there is some kind of wrapping issue or other layout issue that's preventing you from seeing them when the browser is at full width. Try placing your icons in a completely separate container, and see if they appear then. If they do, then it must be something specific to how you have them positioned currently. If you have a live page where I can see the issue, I'd be happy to take a look. Regarding the second issue - you can only use a CSS ID once on a page, so that's likely your problem. Do you want to control each carousel from a separate set of icons, or do you want one set of icons that controls both carousels simultaneously? If it's the latter, then you could use a CSS Class instead of a CSS ID. On the 'Advanced' tab of the carousel, move the 'my-elementor-carousel' from 'CSS ID' to 'CSS Classes' (repeat this on the other carousel too), and then, in the code, change '#my-elementor-carousel' to '.my-elementor-carousel'. This should then target both carousels when you click your icons.

[@daayaniyaa]

@@KingGrizzly thanks for your kind response.I have emailed you the links and screen shots.

[@KingGrizzly]

No problem, I've taken a look and replied to your email.

[@daayaniyaa]

Thanks Chris for your fabulous help on email. You are my knight in the shinning armor!

[@KingGrizzly]

@@daayaniyaa Pleasure! Best of luck with your project!

[@amirhamza5497]

Thank you for the video. It really helped me!

[@maryamali2981]

Hi Chris. Thankyou for this wonderful tutorial. However i am facing an issue. My previous button is not working the next button is working fine, I have no knowledge of coding, so I dont understand what is causing the issue. I just copy pasted the code in the HTML as shown. Hope you can help

[@KingGrizzly]

Hi! If you paste the code you're having problems with here, I'd be happy to take a look.

[@maryamali2981]

@@KingGrizzly jQuery(document).ready(function($) { function getSwiperInstance() { var swiperTarget = $('#my-carousel .swiper-container'); return swiperTarget.data('swiper'); } $('#my-previous-button').on('click', function() { getSwiperInstance().slidePrevious(500, true); }); $('#my-next-button').on('click', function() { getSwiperInstance().slideNext(500, true); }); }); Here you go

[@KingGrizzly]

@@maryamali2981 It looks fine. Have you checked your icons/buttons to make sure you have the correct CSS ID 'my-previous-button' assigned to your previous button? Sometimes it's easy to duplicate a button, and then forget to add or change the CSS ID attached to it.

[@maryamali2981]

@@KingGrizzly Hey. I guess it was a caching issue. Opening it in incognito resolved it and its working absolutely fine now! Thanks for your help. You have earned a subscriber there!

[@KingGrizzly]

@@maryamali2981 Excellent, glad you got it working, and thanks for subscribing!

[@Creatievemakers]

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?

[@KingGrizzly]

Hi. Thanks for watching! Yes, we can take a look if you post your code here - but first, check our updated description underneath the video. The information there about the 'Upgrade Swiper Library' experiment may help you to fix the problem. I've been manipulating Swiper myself recently on the loop carousel, so it definitely works with this new widget. Good luck!

[@MuhtajinMukhtar]

Thank you for your explanation. It gives me a clue to achieve my goal

[@KingGrizzly]

Thanks so much for the feedback! Good luck with your project.

[@MuhtajinMukhtar]

@@KingGrizzly man, do you know how to style that arrow(icon) when navigation button disabled?

[@KingGrizzly]

If you're referring to the custom buttons used to control the carousel (the previous/next buttons at the top), they are Elementor icon widgets. The arrow icons were added in the video at 7:30, but you can also upload your own SVG icons if you prefer. Not sure if this is what you're referring to - if not, let us know and we'll try to help!

[@luiyigan1]

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!

[@KingGrizzly]

I'm not sure I follow. Do you mean you want the carousel to wrap around to the beginning again when you reach the end? If so, there is an 'Infinite scroll' option in the carousel's settings.

[@Javiergcrespo]

Is it the same for the loop carousel?

[@KingGrizzly]

Yes, this also works on the loop carousel.

[@Javiergcrespo]

@@KingGrizzly Thanks, I’ll give it a try 😍

[@KingGrizzly]

Good luck! Happy to help if you run into any issues.

[@Javiergcrespo]

@@KingGrizzly Worked perfectly! Thanks

[@studioalius27]

Hi, what could be the problem if my code doesn't work at all? I tried changing var swiperTarget = $('#my-elementor-carousel .swiper'); but it didn't help. Is there another way to solve it? Thanks a lot for your response.

[@KingGrizzly]

Hi. Unfortunately there really is no way to tell without being able to see your site - there could be a whole host of reasons. I would suggest hitting F12 to open your console and see if you're getting any JavaScript errors when you click your carousel buttons.

[@ВиталийДякин-д6д]

Hello. The video helped a lot. Thank you.

[@daayaniyaa]

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

[@KingGrizzly]

Thanks for watching! Yes, that's possible. You can attach the 'click' event to any kind of element in the JavaScript. Just make sure your buttons have the 'my-prev-element' and 'my-next-element' CSS IDs (or whatever names you're using).

[@daayaniyaa]

@@KingGrizzly thanks for your response. I am using this on the dynamic listing (carousel) widget by theplusaddons for elementor. and i have used the elementor icons like you have used in the video. But the carousel does not take the controls from the icons. At first thought, the issue could be arising because i had given hover animation and hover color to the icons, but the carousel does not take the click even after i removed all the styling. does it have something to do with the carousel?

[@KingGrizzly]

It could be due to a difference in the hierarchy of the elements, as you're using a plugin with different widgets. It's likely that it's failing to get the Swiper instance in the first place. If you know how to use your browser's console, you could check there for any errors being logged. Unfortunately, it will be awkward to troubleshoot without being able to see your code and exactly how you have everything set up.

[@daayaniyaa]

@@KingGrizzly is it possible to connect with you on an email? if its ok, that is.

[@KingGrizzly]

@@daayaniyaa Sure, I can do my best to help. You can reach me on '[e-mail]'. If you provide a login to your site, and a full explanation of exactly what you're hoping to achieve, I'll take a look.

[@MuttaqiAliMuhammad]

This is wonderful. Thanks!

[@KingGrizzly]

So glad it helped you!

[@muhammadaslan6256]

iam make same on vedio but dosen't work iam add the same css id for the carousel and remote icons #my-prev-element:hover, #my-next-element:hover { cursor: pointer; } jQuery(document).ready(function($) { function getSwiperInstance() { var swiperTarget = $('#my-elementor-carousel .swiper-container'); return swiperTarget.data('swiper'); } $('#my-prev-element').on('click', function() { getSwiperInstance().slidePrev(500, true); }); $('#my-next-element').on('click', function() { getSwiperInstance().slideNext(500, true); }); })

[@KingGrizzly]

Hi. Check the updated description below the video. The information there about the 'Upgrade Swiper Library' experiment may help you to fix the problem.

[@eelko5702]

Thank you King Grizzly!

[@eelko5702]

Can you also give a color to the active icon? This means that the icon color also changes when you use the swipe function.

[@KingGrizzly]

Hi. Thanks for watching! I'm not entirely sure what you mean. I assume you want the previous or next icon to 'light up' (change colour) while the slide is moving, depending on whether you're sliding to the previous or next slide? If so, you would need to write additional code. Looking at the Swiper API, you can detect when the carousel starts and finishes moving ('slideChangeTransitionStart' and 'slideChangeTransitionEnd'), so if you create a CSS class that sets a background colour (or whatever effect you want on the icon), you could create an event handler that adds the class to your icon on 'slideChangeTransitionStart', and another one that removes it on 'slideChangeTransitionEnd'. You would also need to determine which direction the carousel is moving in, so you can apply the class to the correct icon. There's a Swiper property called 'swiper.swipeDirection' that will return 'prev' or 'next' to tell you this, so you would need additional logic that examines that value. Perhaps not the answer you were looking for if you're not comfortable with coding! But the benefit of this approach is that the icons would 'light up' whenever the carousel moves, even if you drag it left and right without touching the icons themselves.

[@eelko5702]

@@KingGrizzly That's exactly what I meant but will be a challenge to write this code myself.

[@KingGrizzly]

Sadly Elementor doesn't offer much flexibility with their implementation of Swiper. But now they are using a more up-to-date version of the library, they may hopefully expand the functionality in future releases.

[@Stephen-ef5zk]

Great video! Can this be used on elementor post grid carousels?

[@KingGrizzly]

Thanks for watching! Which widget are you referring to? Is this something that's part of Elementor Pro, or a third-party widget pack? If it's using Swiper, then it should work fine. For example, I have it working on a post carousel created with the 'Elementor Custom Skin' plugin. You sometimes find the data structure is slightly different, so you may need to tweak the line that returns the Swiper instance. I would say give it a try and let us know how you get on!

[@Stephen-ef5zk]

@@KingGrizzly Thanks for replaying! Trying it with the normal elementor Posts widget, with a custom skin for the posts. Instead of showing the posts as grid, I have it as show in slider so it's a carousel. But clicking the icons is doing nothing. Could it be the swiper instance do you think?

[@KingGrizzly]

Yes, that's possibly the problem. If you're familiar with using the console (Ctrl-Shift-J to open it), before the 'return' line, you could try adding: console.log(swiperTarget.data('swiper')); ...and check the console to see if the Swiper instance has been logged. If you can't see anything, or you get 'undefined', then the instance may be under a different property against 'swiperTarget'.

[@Zi0nneBLoeM]

This is what I've been looking for for ages man, !@#$. I don't know if you still active, or read this. But is it possible to explain, on what Element to pick in terms of using a slider? Right now they have a loop builder for instance, which contains a slider aswell. I thought the principle of your code should work on any sliding mechanism, but I'm clueless in which classes or containers to pick out of the code. Is there a possibility to have this discussed or anything? Great work on the vid tho!

[@KingGrizzly]

@Fons Oever Thanks for watching! So glad it helped. Unfortunately things never stand still for long in the Elementor world! We've since moved on to containers, and Elementor have recently introduced an upgraded version of the Swiper library (which is currently an experiment that you can switch off). So both of these things could have an impact on the code. If you're looking specifically to try this code with the loop builder and containers, when I get chance I'll try setting up a quick test page to see whether it works, and if not, what changes might be necessary. I'll post back here with any results.

[@Zi0nneBLoeM]

@@KingGrizzly Would be super cool man, I always use arrows beneath the slider for instance in my designs, but haven't been able to create it with Elementor for years...

[@KingGrizzly]

@Fons Oever I've just tried the code on a test site, and it works just fine on the new loop carousel inside a container, providing you disable the 'Upgrade Swiper library' experiment in Elementor Settings. If you're having trouble getting it working, feel free to post back here. Happy to help!

[@Zi0nneBLoeM]

@@KingGrizzly Is there a way to contact you for some more explanation? Would like to share screens or something? Did you use the same code as here? Same script? Only disabled the Upgrade Swiper Library?

[@KingGrizzly]

@Fons Oever That's right, nothing different from what's in the video. I just tested with a container rather than a section, and used the new loop carousel inside the container. Apart from disabling the Swiper experiment, nothing else changed, and it still worked fine. If you have a test page that you could give us admin access to, I could take a look.

[@victorborgesfurtado3931]

Genius, thank you

[@KingGrizzly]

So glad you found it useful!

[@employexcellentwebworld]

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

[@muhammedsalihoglu_]

Thanks a LOOOOOOOTTTTTTT!

[@sadrihasan6365]

Nice tutorial

[@KingGrizzly]

Glad you enjoyed it. Thanks for watching!

[@pedrosanhueza7747]

i love you

[@J0NAS512]

Doesn't work for me - Says: VM23180:9 Uncaught TypeError: Cannot read properties of undefined (reading 'slidePrev') at HTMLDivElement. (:9:22) at HTMLDivElement.dispatch (jquery-3.6.0.min.js:2:43064) at v.handle (jquery-3.6.0.min.js:2:41048)

[@KingGrizzly]

It sounds as though it's failing to create the initial Swiper instance from your carousel. If you're 100% sure that your code is correct, I would suggest checking the Elementor experiments. I believe the very latest version of Elementor (v3.10 or v3.11) has a new experiment to update to the latest version of the Swiper library (from v5.36 to v8.45). If you have that experiment enabled, it could be causing some conflicts, so try disabling it and test again.

[@BKRLOO]

I had the same issue and it is because of the 'Upgrade Swiper Library' experiment but to fix it, just change .swiper-container to .swiper they updated the markup between v5.36 and v8.45

[@muhammadaslan6256]

@@BKRLOO thank you man i resolove it with you :)

[@JainRealEstateAdvisory]

@@BKRLOO Thank you So Much Bro. It help me to get my output, Thank You Once Again