.swiper-slide-image{cursor: pointer;} document.addEventListener('DOMContentLoaded', function () { /* Edit the URL Links Here */ let links = [ 'one.com/', 'two.com/', 'three.com/', 'four.com/', ]; document.body.addEventListener('click', function (e) { if (e.target.closest('.carousel-links .swiper-slide')){ let i = e.target.closest('.swiper-slide').getAttribute("data-swiper-slide-index"); if (links[i] && links[i].length > 2){ window.open(links[i]); } } }); });
@victorchinedu
5 ай бұрын
location = links[i];
@reefatzapwms3827
20 күн бұрын
Hii I Miss Reefat, I want to add more than 4 links, But after adding more than 4 urls the code doesn't work. Please help.
@victorchinedu
19 күн бұрын
@@reefatzapwms3827 .swiper-slide-image{cursor: pointer;} document.addEventListener('DOMContentLoaded', function () { /* Edit the URL Links Here */ let links = [ 'one.com/', 'two.com/', 'three.com/', 'four.com/', 'five.com/', ]; document.body.addEventListener('click', function (e) { if (e.target.closest('.carousel-links .swiper-slide')){ let i = e.target.closest('.swiper-slide').getAttribute("data-swiper-slide-index"); if (links[i] && links[i].length > 2){ window.open(links[i]); } } }); });
@LeelooDallas
Ай бұрын
THIS WORKED!!! You’re the only more recent video that wasn’t about using a plug-in. I used it on an ad carousel and haven’t had a problem. Thank you 🙏
@siainblack2930
Ай бұрын
i just can't thank you enough.i've been dealing with this problem for a long time because i didn't want to use plugins. thank you again.
@TheBedfordGuide
4 ай бұрын
Absolute legend... this is exactly what I was looking for. Thank you.
@victorchinedu
4 ай бұрын
Appreciate the kind words ☺ & You're welcome.
@AdsVal-w9i
Ай бұрын
This is exactly what I have been looking for , Thank You so much
@ct00001
Ай бұрын
Fantastic tutorial. Thank you! Also, it's amazing that Elementor hasn't paid you and added this as a feature by now.
@victorchinedu
Ай бұрын
Hehehe.. I appreciate the kind words. This actually put a smile on my face. There are several responses to this questions so I'm gonna leave it up to speculations as to why they haven't yet.
@marcguindon9028
3 ай бұрын
This is life saving , not all hero wear cape , but you definitely need to get one now :D
@victorchinedu
3 ай бұрын
Hahaha... I appreciate that, thanks for the kind words. 🦸♀
@imwesking
5 ай бұрын
easy, fast, straight to the point, no weird links and working like a charm! Thanks! you have a new subscriber
@victorchinedu
5 ай бұрын
Much appreciated & thanks for the Sub, that means a lot.
@renalyndepaz7281
Ай бұрын
Wow! Thank you so much. This tutorial is very clear and easy to follow.
@victorchinedu
Ай бұрын
I'm glad to hear that & You're welcome
@warpvector
Ай бұрын
@@victorchinedu it's not working for me. Any thoughts?
@leoncurtize
4 ай бұрын
Great! you've thought about everything :)
@victorchinedu
4 ай бұрын
I'm Glad you found the video helpful.
@lukasmalek1296
4 күн бұрын
Worked! Thanks a lot!!!
@victorchinedu
4 күн бұрын
I'm glad to help. 😎
@thecookingshorts
3 ай бұрын
subbed brother Chinedu. thank you. worked like a charm and easy to follow!
@victorchinedu
3 ай бұрын
I appreciate the kind words & I'm glad it worked out fine for you.
@meghajain-z7n
3 күн бұрын
can you let us know how to add minimum order quantity on each product without using plugin for wordpress woodmart theme
@asantamzid
3 ай бұрын
I've multiple carousel I see the pointer is showing in every carousel
@carla120683
23 күн бұрын
Thank you very much for sharing. Just only links to the last one for me. What could happen?
@carla120683
23 күн бұрын
Sorry, code works great, the issue is if 1 slide shown.
@sharonreaves
18 күн бұрын
I am so grateful for this solution and hope Elementor will eventually add this as a feature. My one question is that in working on my client's SEO these links are not showing as outbound links. Is there a workaround for that? Thanks!
@victorchinedu
17 күн бұрын
You can use anchor tags () in the HTML, Instead of relying solely on JavaScript to open the links, you can insert elements into the DOM for each swiper slide. This will allow SEO tools to detect these as outbound links. *This is an adjusted approach* .swiper-slide-image{cursor: pointer;} document.addEventListener('DOMContentLoaded', function () { /* Edit the URL Links Here */ let links = [ 'one.com/', 'two.com/', 'three.com/', 'four.com/', ]; // Create anchor tags dynamically let slides = document.querySelectorAll('.swiper-slide'); slides.forEach((slide, index) => { let linkElement = document.createElement('a'); linkElement.href = links[index]; linkElement.target = '_blank'; // Opens in a new tab linkElement.textContent = `Visit ${links[index]}`; // Optional: You can add text or wrap image with this link slide.appendChild(linkElement); // Append anchor to the swiper slide }); document.body.addEventListener('click', function (e) { if (e.target.closest('.carousel-links .swiper-slide')) { let i = e.target.closest('.swiper-slide').getAttribute("data-swiper-slide-index"); if (links[i] && links[i].length > 2){ window.open(links[i]); // This will still open the link } } }); });
@BillyfromGrowthie
2 ай бұрын
Hi Victor, thanks for the tutorial. It works! I am wondering how to make it not open as a new tab.
@victorchinedu
2 ай бұрын
I spoke on how to do so towards the end of the video, the code in nested as a reply with the 📌 comment
@ALGOChannel
5 ай бұрын
Straight to the point and super useful, thanks for the vid, you are a lifesaver! Just one thing to ask, is it possible to also give each image a little animation on hover like a small size change or something like that?
@victorchinedu
5 ай бұрын
Sure a CSS hover effect can be applied to that. You may have to search online for the specific hover animation you are trying to use and apply the code to the image carousel widget itself, and not the Code snippet provided.
@PeteCurrington
28 күн бұрын
Any way to make them elementor pop up windows?
@tommclaughlin3609
Ай бұрын
Hi - thank you for the reply but still unable to find the code snippet. I can't be the only one.
@victorchinedu
19 күн бұрын
.swiper-slide-image{cursor: pointer;} document.addEventListener('DOMContentLoaded', function () { /* Edit the URL Links Here */ let links = [ 'one.com/', 'two.com/', 'three.com/', 'four.com/', ]; document.body.addEventListener('click', function (e) { if (e.target.closest('.carousel-links .swiper-slide')){ let i = e.target.closest('.swiper-slide').getAttribute("data-swiper-slide-index"); if (links[i] && links[i].length > 2){ window.open(links[i]); } } }); });
@texasmays
Ай бұрын
Thanks!
@victorchinedu
Ай бұрын
Its my pleasure.
@brightwhite22
Ай бұрын
you're the man!
@truthchannel4455
4 ай бұрын
Thank you so much!
@victorchinedu
4 ай бұрын
I'm glad to help & you're welcome.
@oxa01
3 ай бұрын
This is great! What if I have several galleries in one page?
@victorchinedu
3 ай бұрын
You can have to take a look at this: element.how/elementor-image-carousel-links/
@tommclaughlin3609
Ай бұрын
Tried and tried - unable to find the code snippet mentioned in the video??? Tom
@victorchinedu
Ай бұрын
Its within the comment section
@karagallone6985
4 ай бұрын
Hello - this has been very helpful! - but if I was to have two different image carousels on a page - how can I custom link both? I have tried but the second carousel isn't linking to anything or is linking to the first lot of URLs.
@victorchinedu
4 ай бұрын
This page addresses that concern. element.how/elementor-image-carousel-links/
@AdsVal-w9i
Ай бұрын
@victorchinedu Thank You so much for this life saving video. Na man you be. Thanks again Brother Chinedu.
@victorchinedu
Ай бұрын
Thank You brother.. 😎
@victorchinedu
Ай бұрын
Thank You brother.. 😎
@EasymapGeo
Ай бұрын
if you have more carousels change the name of css class
@clementjossin6427
2 күн бұрын
THANKSSSSSS
@victorchinedu
2 күн бұрын
You're welcome.
@warpvector
Ай бұрын
Still not working. Please advise.
@victorchinedu
Ай бұрын
Could be that you've having a plugin conflicting with the said code snippet - But that's unlikely. Its important you watch every second of the video for it to work as should. You may have missed using the exact "css class" as pointed out in the video. Ps. The CSS class is case sensitive.
@warpvector
Ай бұрын
@@victorchinedu As I said in my other comment it DOES work, it just doesn't work when there's only 1 image displayed at a time.
@Bipiem-65
5 ай бұрын
So good!
@victorchinedu
5 ай бұрын
Thank You. Much appreciated.
@3ptt
2 ай бұрын
I was happily using this hack on a Carousels, however starting from today (I guess) links aren't working anymore, I have to say I've upgraded elementor to latest version this morning. It this happening to someone else too? Thanks!
@victorchinedu
2 ай бұрын
I've updated the HTML code snippet, please give it another try and let me know if it works.
@LukeShaw-xr3zu
2 ай бұрын
I've also followed this tutorial exactly and have had a similar problem today, none of the images open a link! Thanks
@LacherInsurance
2 ай бұрын
@@LukeShaw-xr3zu same here
@victorchinedu
2 ай бұрын
@@LukeShaw-xr3zu Please use the exact CSS class as directed within the video
@victorchinedu
2 ай бұрын
@@LacherInsurance Please use the exact CSS class as directed within the video, let me know if that works. The code snippet has been updated. Thank You
@jankirawat8723
3 ай бұрын
if i want to link elementor popup in some of the image than what can i do for it
@victorchinedu
3 ай бұрын
I'll recommend you take a look at this article: element.how/elementor-image-carousel-links/
@jankirawat8723
3 ай бұрын
@@victorchinedu with this code only pages links are getting opened . I want if anyone clicked on any of the image the elementor popup should open
Пікірлер: 74