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

Elementor Close PopUp on Click for Menu & Same Page Links
left element

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. Add a link for every image. Then add the same links again, as the element duplicates the images.

<style>.swiper-slide-image{cursor: pointer;} </style>

<script>
'use strict';

document.addEventListener('DOMContentLoaded', function () {

var filteredImages = document.querySelectorAll('.swiper-slide');

//Edit the links HERE
var links = [
'https://elementorcodes.com/elementor-pop-ups-problems/',
'https://elementorcodes.com/elementor-horizontal-scroll-section/',
'https://elementorcodes.com/amazing-accordion-section/',
'https://elementorcodes.com/awesome-hexagonal-boxes/',
'https://elementorcodes.com/show-header-hamburger-click/',
'https://elementorcodes.com/elementor-centered-logo-header/',
//same links here
'https://elementorcodes.com/elementor-pop-ups-problems/',
'https://elementorcodes.com/elementor-horizontal-scroll-section/',
'https://elementorcodes.com/amazing-accordion-section/',
'https://elementorcodes.com/awesome-hexagonal-boxes/',
'https://elementorcodes.com/show-header-hamburger-click/',
'https://elementorcodes.com/elementor-centered-logo-header/',
//and same links here
'https://elementorcodes.com/elementor-pop-ups-problems/',
'https://elementorcodes.com/elementor-horizontal-scroll-section/',
'https://elementorcodes.com/amazing-accordion-section/',
'https://elementorcodes.com/awesome-hexagonal-boxes/',
'https://elementorcodes.com/show-header-hamburger-click/',
'https://elementorcodes.com/elementor-centered-logo-header/'
];

var _loope = function _loope(i) {
filteredImages[i].addEventListener('click', function () {
location = links[i];
});
}

for (var i = 0; i < filteredImages.length; i++) {
_loope(i);
}
});
</script>

Finally, enjoy your Elementor gallery 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.

New tab instead of same window: replace this line of code

location = links[i];

with this code

window.open(links[i]);

to open the links in a new tab instead of opening in the same window.

Et voila! Thanks for reading!
Let me know if you need help!

< News >

Enjoyed this tutorial? Get more awesome designs, right in your inbox!

No spam, not more than one weekly email.

Addons Resources
Addons
Resources
Addons
Finder Tool
Addons
Discount Codes
Addons
Review
< Recent Designs >

Visit the Learning Center For More Designs !

Created by <Element Or Codes>