Elementor Image Carousel Links - Add a Different Link to Each Image
No extra plug-ins required! Elementor Free compatible!
Here is how to easily add a different link to every image in the basic image carousel element from Elementor Free. These Elementor image carousel links are not yet available directly from that element’s settings.
Working example:
To begin with, add an HTML element on the same page as the Elementor Image Carousel
It doesn’t really matter where on the page the Element is added…
After that, add a class name to your Elementor carousel element
Give it the class name “carousel1” under Advanced > CSS Classes.
Set your carousel to "loop"
The code provided will only work if your carousel is set to loop.
Then, add this code the html element, and edit the links to your own
Important: the first link will be automatically linked with the first image in the gallery, and so on.
<script> /* Please login to get the code * The code will be for the Elementor Image Carousel Links - Custom Link for Each Image tutorial * Found at this URL https://element.how/elementor-image-carousel-links/ */ </script>
To make it work with multiple Image Carousel elements on the same page, use the code below instead.
You will also need to add the class ‘carousel1’ , ‘carousel2’ , ‘carousel3’ etc to each Image Carousel (Under Advanced > CSS Classes).
<script> /* Please login to get the code * The code will be for the Elementor Image Carousel Links - Custom Link for Each Image tutorial * Found at this URL https://element.how/elementor-image-carousel-links/ */ </script>
Finally, enjoy your Elementor carousel links!
Important: the ‘link’ setting in the Elementor Image Carousel needs to be set to ‘none’!
Important: It might not work while you are logged into WordPress. To verify that it is working, visit your page in incognito mode.
Same window instead of new tab: replace this line of code
window.open(links[i]);
with this code
location = links[i];
to open the links in the same window. instead of opening in a new tab
Extra: Want these Elementor Gallery Images to open a Popup ? Use this code instead.
Check this image to find your popup IDs.
<script> /* Please login to get the code * The code will be for the Elementor Image Carousel Links - Custom Link for Each Image tutorial * Found at this URL https://element.how/elementor-image-carousel-links/ */ </script>
Hey Maxime!
I know this is not exactly the question for this thread, but still, hopefully you can help me!
Is there a way I can use custom added icons to move the image carousel?
I have added 2 arrows, outside of elementor image carousel with custom placing and I need them to move the slides left and right.
I need to use querySelector to select the image carousel class (which is image-car ) and initiate the swiper slider? After that Im pretty much stuck.
The left arrow has a id of arrow-prev and right one has id of arrow-next.
Thanks in advance!
Hi this does not seem to work for me
https://www.onlinebeautyproducts.com.au/product-category/tanning/
I have link set to 'none' on my carousel
.swiper-slide-image{cursor: pointer;}
document.addEventListener('DOMContentLoaded', function () {
/* Edit the links HERE */
let links = [
'https://www.onlinebeautyproducts.com.au/brands/sunescape/',
'https://www.onlinebeautyproducts.com.au/brands/moroccan-tan/',
'https://www.onlinebeautyproducts.com.au/brands/ecococo/',
'https://www.onlinebeautyproducts.com.au/brands/summer-tan/'
];
document.body.addEventListener('click', function (e) {
if (e.target.closest('.carousel1 .swiper-slide')){
let i = e.target.closest('.swiper-slide').getAttribute("data-swiper-slide-index");
if (links[i].length > 2){
window.open(links[i]); /* TO OPEN LINKS IN SAME WINDOW USE: location = links[i]; */
}
}
});
});
hello
i am using this code but links go : about:blank. Not sure why. Can u please help?
.swiper-slide-image{cursor: pointer;}
document.addEventListener('DOMContentLoaded', function () {
var filteredImages = document.querySelectorAll('.carousel1.swiper-slide');
//Edit the links HERE
var links = [
"https://diggitymarketing.com/",
'https://create.element.how/elementor-pop-ups-problems/',
'https://create.element.how/amazing-accordion-section/',
'https://create.element.how/awesome-hexagonal-boxes/',
'https://create.element.how/show-header-hamburger-click/',
'https://create.element.how/elementor-centered-logo-header/'
];
document.body.addEventListener('click', function (e) {
if (e.target.closest('.swiper-slide')){
let i = e.target.closest('.swiper-slide').getAttribute("data-swiper-slide-index");
window.open(links[i]);
}
});
});
This no longer works with the new Elementor and Elementor Pro updates. It was working fine in May 2023; however, June's update stopped the functionality of multiple URLs in the image carousel.
document.addEventListener('DOMContentLoaded', function () {
/* Edit the links HERE */
let links = [
'https://link1.com',
'https://link2.com',
'https://link3.com'
];
const carousel = document.querySelector('.carousel1');
if (!carousel) {
console.warn('No Elementor carousel found with class "carousel1".');
return;
}
const slides = carousel.querySelectorAll('.swiper-slide');
slides.forEach((slide, index) => {
slide.style.cursor = 'pointer';
slide.addEventListener('click', () => {
if (links[index] && links[index].length > 2){
window.open(links[index]); /* TO OPEN LINKS IN SAME WINDOW USE: location = links[index]; */
}
});
});
});
Hi J,
This last code doesn't work for me. I see the text appear in the HTML section on the site. Am I doing something wrong?
Greetings, Rean
Greetings Rean!
If your carousel is set to loop, use the code provided in the tutorial.
Cheers!
Greetings J!
The code provided in the tutorial is tested working as of the latest Elementor version. This website runs the latest version, and I have a working demo on this page.
The code you provided is great and what I used to give here a long time ago. However there is one serious flaw with it: it doesn't consider that in a Swiper slider, the DOM constantly changes and slides get added and removed, when in loop mode.
So you add an event listener to the slides that are currently in the DOM when the code runs. However it will change, and if the user ends up clicking in a slide freshly added to the DOM, then the click event won't be on it.
If your carousel isn't looping it's not a problem, however I think most people set it to loop.
The way I coded this in the tutorial prevents any issue regarding these DOM changes.
Cheers!
Upon further testing I see that my code does not work if the carousel is NOT set to loop, so in these cases your code is a great alternative!
Cheers!
Works great thank you.
Welcome Louisa!
Hi, dude I have been reading all your reply and it's impressive that u are still replying after 3 years x)
Im making an home page with an images carousel but the code doesnt work... thats sad.
I did everything like u said and it's still not working... I'm not giving up so could u please tell me why it is not working ???
.swiper-slide-image{cursor: pointer;}
document.addEventListener('DOMContentLoaded', function () {
var filteredImages = document.querySelectorAll('.swiper-slide');
//Edit the links HERE
var links = [
'https://www.e-movens.fr/gestion-carte-carburant-flotte-automobile/40-dkv.html',
'https://www.e-movens.fr/vehicules/62-renault.html',
'https://www.e-movens.fr/securite-incendie/279-alternatives-preventions.html',
'https://www.e-movens.fr/locaux-pro-reglementation/550-rema-groupe.html',
];
document.body.addEventListener('click', function (e) {
if (e.target.closest('.swiper-slide')){
let i = e.target.closest('.swiper-slide').getAttribute("data-swiper-slide-index");
location = links[i];
}
});
});
Thanks
Greetings,
Please share the page URL where you are trying this with me.
https://woo2.e-movens.fr/
There u are !
It's working for me actually... Everything is working just as it should...
it's maybe due to an extension... mmmmh will check
oh, it's not about the second carousel, but the first images u see when u land on the website. It's the 4 images carousel that I need to work
Not working for me 🙁 Help me please
Thank you! this helps all the way. But it seems like not working for the mobile version. Any advice for mobile version?
It should be working fine for mobile too.
Hi!
Thanks so much for this article, however, I can't get it to work either. Not sure what's going on.
Here is the link: puntagordachamber.com
We only want the links attached to the Gold slider.
Also, here is the code:
.swiper-slide-image{cursor: pointer;}
document.addEventListener('DOMContentLoaded', function () {
/* Edit the links HERE */
let links = [
'https://www.beaneatkinson.com',
'https://thecaptainstable.com',
'https://laishleycrabhouse.com',
'https://bigshotmad.com',
'https://harpoonharry.com',
'https://www.dwsussman.com',
'https://www.iheartmedia.com',
'https://www.kw.com/agent/UPA-6587385214940647426-5',
'https://landsbergbennett.com',
'https://www.poolboyinc.com',
'https://www.puntagordachamber.com/punta-gorda-farmers-market/',
'https://www.shorepointhealthcharlotte.com',
'https://southportseniorliving.com',
'https://suncoastbeverage.com,
'https://tamiamitavern.com',
'https://nixandassociates.com',
'https://swflparrot.com',
'https://time-realty.com',
'https://wm.com',
'https://thewyvernhotel.com'
];
document.body.addEventListener('click', function (e) {
if (e.target.closest('.carousel1 .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]); /* TO OPEN LINKS IN SAME WINDOW USE: location = links[i]; */
}
}
});
});
Greetings Kaity!
You have a typo here:
'https://suncoastbeverage.com,
Should be:
'https://suncoastbeverage.com',
Cheers!
Hi, thank you!
I made that update, but it's still not working. When I hover over the images, the mouse changes to the "click" option, but when I click, nothing happens.
Almost there Kaity!
Now you have the "carousel1" in your CSS ID field, but it should be in the CSS Classes field, right below!
I had it working for one of my carousels!
But when I added the multiple carousel code, none of them are working now. Both CSS classes are carousel1 and carousel2
Her is the code: (sorry for the length)
<style>.swiper-slide-image{cursor: pointer;} </style>
<script>
/* For Carousel 1 on the page */
document.addEventListener('DOMContentLoaded', function () {
/* Edit the links HERE */
let links = [
'https://www.beaneatkinson.com',
'https://thecaptainstable.com',
'https://laishleycrabhouse.com',
'https://bigshotmad.com',
'https://harpoonharry.com',
'https://www.dwsussman.com',
'https://www.iheartmedia.com',
'https://www.kw.com/agent/UPA-6587385214940647426-5',
'https://landsbergbennett.com',
'https://www.poolboyinc.com',
'https://www.puntagordachamber.com/punta-gorda-farmers-market/',
'https://www.shorepointhealthcharlotte.com',
'https://southportseniorliving.com',
'https://suncoastbeverage.com',
'https://tamiamitavern.com',
'https://nixandassociates.com',
'https://swflparrot.com',
'https://time-realty.com',
'https://wm.com',
'https://thewyvernhotel.com'
];
document.body.addEventListener('click', function (e) {
if (e.target.closest('.carousel1 .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]); /* TO OPEN LINKS IN SAME WINDOW USE: location = links[i]; */
}
}
});
});
/* For Carousel 2 on the page */
document.addEventListener('DOMContentLoaded', function () {
/* Edit the links HERE */
let links = [
'https://www.crews.bank',
'https://jmerakibeauty.com',
'https://militaryheritagemuseum.org,
'https://www.americanleakdetection.com',
'https://www.camrealty.us',
'https://www.swflvisitor.com/index.php,
'https://www.mycreativewindow.com',
'https://mydestinationflorida.com',
'https://www.dreamsalonspa.net',
'https://everythingpuntagorda.com/the-city-of-punta-gorda-information-website/',
'https://www.fishermensvillage.com',
'https://www.friendlyfloors.com',
'https://www.islesyc.com',
'https://www.johnsontaylorfuneral.com',
'https://karamiles.kw.com',
'https://www.mccrorylaw.com',
'https://www.michaelsaunders.com',
'https://pgchocolateandwine.com',
'https://wm.com',
'https://thewyvernhotel.com',
'https://www.andrewsfss.com',
'https://www.wengradio.com',
'https://www.whitcoinsurancepg.com',
'https://pgchocolateandwine.com',
'https://charlottecf.org/?subcat=7',
'https://www.levellwealthmanagement.com',
'https://www.levellwealthmanagement.com',
'https://www.meridiansenior.com/senior-living/fl/punta-gorda/meridian-at-punta-gorda-isles/',
'https://walkerrealtygroupllc.com',
'https://www.sunseekerresorts.com',
'https://www.instagram.com/connectprintpromotions'
];
document.body.addEventListener('click', function (e) {
if (e.target.closest('.carousel2 .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]); /* TO OPEN LINKS IN SAME WINDOW USE: location = links[i]; */
}
}
});
});
</script>
There's an issue somewhere in the carousel2 batch, but I can't find it. I'm sure it's super obvious lol
Okay, I found a miss apostrophe on the swflvisitor.com line, and fixed that, but it is still not working
Found the the missing apostrophe and it's working now!
I've tried setting this up on the front page of a site, and for the life of me can't figure out why it's not working. https://www.fauxstainedglasspanes.com
I've tried numerous things to no avail (among other things, I have tried it with a specific class associated with the image carousel although at the moment the target in the html is just '.swiper-slide'). I think I've got it reset back to the recommended implementation, but it just ain't working. The closest I've come is when reloading the page, I see the pointer hovering over the carousel for a moment, but then it resets as the page continues to load and no longer works. I've tried to walk through the loading code in the dev tools with breakpoints to suss out the offender, but it's a bit out of my depth and I wasn't able to find anything conclusive. If I can get a pointer, I'd appreciate it.
The carousel is the single square image on the right side of the hero that cycles through a bunch of images.
My issue with the carousel links not working was because I was using the 'fade' transition. I managed to come up with a solution that works in that case...
<style>
.elementor-image-carousel.swiper-wrapper {
cursor: pointer;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
/* Put all your links HERE */
let links = [
'https://www.yoursite.com/product/yourproduct-01',
'https://www.yoursite.com/product/yourproduct-02',
];
/* Add your carousel class as the argument of the querySelector function HERE */
const carousel = document.querySelector('.carousel1');
carousel.addEventListener('click', function () {
const activeSlide = carousel.querySelector('.swiper-slide-active');
const index = activeSlide.getAttribute("data-swiper-slide-index");
window.location.href = links[index];
});
});
I added the code as recommended, but the links aren't working? https://andrewsartistry.com/value-crafted/
Here's the code:
<style>.swiper-slide-image{cursor: pointer;} </style>
<script>
/* For Carousel 1 on the page */
document.addEventListener('DOMContentLoaded', function () {
/* Edit the links HERE */
let links = [
'https://andrewsartistry.thrivecart.com/allure-branding-package/',
'https://andrewsartistry.thrivecart.com/ballet-etoile-branding-package/',
'https://andrewsartistry.thrivecart.com/echosphere-branding-package/',
'https://andrewsartistry.thrivecart.com/essence-branding-package/',
'https://andrewsartistry.thrivecart.com/namaste-branding-package/',
'https://andrewsartistry.thrivecart.com/powerhouse-branding-package/'
'https://andrewsartistry.thrivecart.com/premier-branding-package/'
'https://andrewsartistry.thrivecart.com/pulsebeat-branding-package/'
'https://andrewsartistry.com/sunnyskip-branding-package/'
'https://andrewsartistry.thrivecart.com/urban-funk-branding-package/'
];
document.body.addEventListener('click', function (e) {
if (e.target.closest('.carousel1 .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]); /* TO OPEN LINKS IN SAME WINDOW USE: location = links[i]; */
}
}
});
});
/* For Carousel 2 on the page */
document.addEventListener('DOMContentLoaded', function () {
/* Edit the links HERE */
let links = [
'https://andrewsartistry.thrivecart.com/show-materials-cirque-de-dance/',
'https://andrewsartistry.thrivecart.com/dance-your-heart-out-show-materials/',
'https://andrewsartistry.thrivecart.com/enchanted-forest-show-materials/',
'https://andrewsartistry.thrivecart.com/everybody-dance-now-show-materials/',
'https://andrewsartistry.thrivecart.com/never-miss-a-chance-show-materials/',
'https://andrewsartistry.thrivecart.com/new-york-show-materials/'
];
document.body.addEventListener('click', function (e) {
if (e.target.closest('.carousel2 .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]); /* TO OPEN LINKS IN SAME WINDOW USE: location = links[i]; */
}
}
});
});
/* For Carousel 3 on the page */
document.addEventListener('DOMContentLoaded', function () {
/* Edit the links HERE */
let links = [
'https://andrewsartistry.thrivecart.com/dance-your-heart-out-poster-art/',
'https://andrewsartistry.thrivecart.com/dancer-photo-and-illustration-quote/',
'https://andrewsartistry.thrivecart.com/custom-watercolor-portrait-art/',
'https://andrewsartistry.thrivecart.com/dance-with-a-pegasus-poster-art/',
'https://andrewsartistry.thrivecart.com/dance-with-a-chimera-poster-art/',
'https://andrewsartistry.thrivecart.com/dance-with-an-elf-poster-art/'
'https://andrewsartistry.thrivecart.com/dance-with-a-phoenix-poster-art/'
'https://andrewsartistry.thrivecart.com/aerial-arts-with-a-pixie-poster-art/'
];
document.body.addEventListener('click', function (e) {
if (e.target.closest('.carousel3 .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]); /* TO OPEN LINKS IN SAME WINDOW USE: location = links[i]; */
}
}
});
});
/* For More carousels, keep duplicating the code in the same fashion, replacing '.carouselx' with the right x value */
</script>
Greetings Amber!
You need a comma at the end of each link. Please add it, and then it should work!
Cheers!
Thank you!!!1
Todd you are a life saver.
The links for Fade mode code in Carousel worked a treat !
Regards,
Philip
Welcome Phillip!