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…
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.
<style>.swiper-slide-image{cursor: pointer;} </style>
<script>
document.addEventListener('DOMContentLoaded', function () {
/* Edit the links HERE */
let links = [
'https://element.how/elementor-pop-ups-problems/',
'https://element.how/elementor-horizontal-scroll-section/',
'https://element.how/amazing-accordion-section/',
'https://element.how/awesome-hexagonal-boxes/',
'https://element.how/show-header-hamburger-click/',
'https://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");
location = links[i];
}
});
});
</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).
<style>.swiper-slide-image{cursor: pointer;} </style>
<script>
/* For Carousel 1 on the page */
document.addEventListener('DOMContentLoaded', function () {
/* Edit the links HERE */
let linksCarousel = [
'https://element.how/elementor-pop-ups-problems/',
'https://element.how/elementor-horizontal-scroll-section/',
'https://element.how/amazing-accordion-section/',
'https://element.how/awesome-hexagonal-boxes/',
'https://element.how/show-header-hamburger-click/',
'https://element.how/elementor-centered-logo-header/'
];
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");
location = linksCarousel[i];
}
});
});
/* For Carousel 2 on the page */
document.addEventListener('DOMContentLoaded', function () {
/* Edit the links HERE */
let linksCarousel = [
'https://element.how/elementor-pop-ups-problems/',
'https://element.how/elementor-horizontal-scroll-section/',
'https://element.how/amazing-accordion-section/',
'https://element.how/awesome-hexagonal-boxes/',
'https://element.how/show-header-hamburger-click/',
'https://element.how/elementor-centered-logo-header/'
];
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");
location = linksCarousel[i];
}
});
});
/* For Carousel 3 on the page */
document.addEventListener('DOMContentLoaded', function () {
/* Edit the links HERE */
let linksCarousel = [
'https://element.how/elementor-pop-ups-problems/',
'https://element.how/elementor-horizontal-scroll-section/',
'https://element.how/amazing-accordion-section/',
'https://element.how/awesome-hexagonal-boxes/',
'https://element.how/show-header-hamburger-click/',
'https://element.how/elementor-centered-logo-header/'
];
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");
location = linksCarousel[i];
}
});
});
/* For More carousels, keep duplicating the code in the same fashion, replacing '.carouselx' with the right x value */
</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.
Extra: Want these Elementor Gallery Images to open a Popup ? Use this code instead.
Check this image to find your popup IDs.
<style>.swiper-slide{cursor: pointer;} </style>
<script>
document.addEventListener('DOMContentLoaded', function () {
let popupposts = ['3212','3208','3215']; /* enter your popups IDs here , in the order you want them to show up */
document.body.addEventListener('click', function (e) {
if (e.target.closest('.swiper-slide')){
let i = e.target.closest('.swiper-slide').getAttribute("data-swiper-slide-index");
elementorProFrontend.modules.popup.showPopup( { id: popupposts[i] } );
}
});
});
</script>
