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:

Dophin
Lynx
Tigre
stick
phonestickys
phonesticker
Previous
Next

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.


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

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

Tagged

95 Responses

  1. yes, this happens for some reasons... but only when you are logged in. try checking in incognito mode, it should work there... and for all your visitors

    1. I fixed this.. seems like when I created the article, Elementor was changing quite a few things with their new swiper.js ! now everything should work fine, everywhere!

    1. I fixed this.. seems like when I created the article, Elementor was changing quite a few things with their new swiper.js ! now everything should work fine, everywhere!

  4. This does appear to work with the current version of swiper.js. You are using v. 4.4.6 The current version of swiper.js included in Elementor is 5.3.0. Not sure what changes need to be made to your script.

    1. I fixed this.. seems like when I created the article, Elementor was changing quite a few things with their new swiper.js ! now everything should work fine, everywhere!

    1. Issue solved. The number of picture showed in the desktop carousel must be the same of the number of picture showed in the mobile. In this case the links matches

    1. Treat all the pictures in the two slides as if they were one. That is, if the first slide has 4 pictures and the second has 4 more, links 1-4 will be for the first slide and 5-8 for the second slide. It worked for me 🙂

  8. Guys those who have link mismatch issue please modify _loop function to as following it worked for me

    let _loope = function _loope(i) {
    filteredImages[i].addEventListener('click', function () {
    let linkid = filteredImages[i].getAttribute("data-swiper-slide-index");
    location = links[linkid];
    });
    }

    5. Hi, I still have mismatched issue for both computer and mobile format... do you mind clarifying where exactly should I insert/ replace the above code? Thanks!

    6. Raquel Wu Replace all the code with this (and you only need a single instance of the links, with that code) :

      <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.../',
      '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/'
      ];

      let _loope = function _loope(i) {
      filteredImages[i].addEventListener('click', function () {
      let linkid = filteredImages[i].getAttribute("data-swiper-slide-index");
      location = links[linkid];
      });
      }

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

    7. Maxime Desrosiers thank you so much! You guys are my life-saver! I've been fiddling with it for so long!

      I have replaced: location = links[linkid];
      with: window.open(links[linkid]);
      to have the new windows from the link to open separately and it work!!

      Big thanks to Maxime and the group!

  9. This tip is not working for me. After copying the link to a pdf doc in all three places I get a referral to "https://yvd.f69.myftpupload.com/.../BROADVIEW_FGM.2-1.pdf/" and get:
    "Not Found
    The requested URL was not found on this server."

    I would love to know what I'm doing wrong.

    1. it might be some file permission stuff... do you know if your PDF has the right permissions to be downloaded and accessed directly ?

  10. This is really awesome! Unfortunately I have trouble to make it work with different galleries (not carousel) on the same page. I use several galleries to mirror kind of filtering. Therefore the same images are appearing in different galleries in different order. Is there any hack to tweak the code to enable an anchor link on each image, indepent from the order within the galleries?

  11. Hello, it worked for me, but now i have a problem, i have two slideshows on the main page and the second one its supposed to have another link

    1. Hey Daniel! Add a class to your image carousel ('carousel1'), then change this code

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

      to this

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

      Then, duplicate the code, add a class to your other image carousel ('carousel2'), and in the duplicated code, change it to this:

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

    2. Maxime Desrosiers hi there! i have 9 carrousels (yes, nine :'( ), with about 900 images. Does this system of adding class to each carrousel shold work? where do i add the class?

    3. Juan Manuel Amatta Yes It should! Add the classes to the carousel elements, under Advanced, in Elementor carousel element settings.

  12. Other solution is use the caption of the image.

    <style>.swiper-slide-image{cursor: pointer;}</style>
    <script>
    'use strict';

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

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

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

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

    3. Corné Snijders That's right. I didn't understand your question properly...

      Hmm yes it would be possible, but extra coding work is needed. And because it's not a feature most people need, it goes beyond the scope of the article here.. If you would like me to code this for you though, you can send me a message!

  16. That's crazy. Clicking on each image in the back end should bring up a field for a link. Should not have to play around with code to accomplish something so simple.

  17. It worked perfectly for one carousel. But I have a second carousel on the same page and these links work on this one too. I would like to add different links to second carousel. Do you have a solution for that?

    1. Add a class to your first image carousel ('carousel1'), then change this code

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

      to this

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

      Then, duplicate the code, add a class to your other image carousel ('carousel2'), and in the duplicated code, change it to this:

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

      For the rest, follow the instructions normally!

  18. I've discovered that after scrolling through the images, their link is intermittently not clickable. Any ideas what could be causing this?

    1. Right, I was able to replicate that bug... try with this code instead, let me know if it works! Links are only needed once in this case.

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

      <script>
      document.addEventListener('DOMContentLoaded', function () {

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

      //Edit the links HERE
      var links = [
      'https://create.element.how/elementor-pop-ups-problems/',
      'https://create.element.how/elementor-horizontal-scroll.../',
      '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");
      location = links[i];
      }
      });
      });
      </script>

    2. Thanks for this Maxime Desrosiers. I should have really provided the code I was originally using as per below 🙂

      I switched out the 'let _loope = function _loope(i)' function with your solution 'document.body.addEventListener('click', function (e)' and looks like there was no link mismatch but more importantly the links were all clickable without any intermittent issues.

      However and sorry if I missed something in your code but seems to work for only one carousel so '.carousel1' is returning '.carousel2' links.

      Original code:

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

      <script>
      'use strict';

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

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

      var links = [
      'https://www.link1.co.uk/',
      'https://www.link2.co.uk/',
      'https://www.link3.co.uk/',
      'https://www.link4.co.uk/',
      ];

      let _loope = function _loope(i) {
      filteredImages[i].addEventListener('click', function () {
      let linkid = filteredImages[i].getAttribute("data-swiper-slide-index");
      location = links[linkid];
      });
      }

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

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

      <script>
      'use strict';

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

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

      var links = [
      'https://www.link5.co.uk/',
      'https://www.link6.co.uk/',
      'https://www.link7.co.uk/',
      'https://www.link8.co.uk/',
      ];

      let _loope = function _loope(i) {
      filteredImages[i].addEventListener('click', function () {
      let linkid = filteredImages[i].getAttribute("data-swiper-slide-index");
      location = links[linkid];
      });
      }

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

    3. Joseph Paul Here it is for more than one carousel on the page.

      You will need to add the class 'carousel1' , 'carousel2' , 'carousel3' etc to each Image Carousel (Under Advanced > CSS Classes).

      Let me know if it works!

  19. Hello Maxime,

    Thanks again for a great piece of code.
    Is there any possibility to open a custom link in a lightbox or popup (lightbox has my preference)

    I know elementor can open the carousel image in a lightbox, but I want a custom link (page or image) opened in a lightbox, to give some extra info about that image in that lightbox

    1. quick update, the popup is possible by adding

      let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
      width=0,height=0,left=-1000,top=-1000`;

      and then changing the link to

      window.open(links[i], '', params);

      I hope a lightbox is possible to

    2. Hielke Miedema lightbox isn't really possible direcly, as it would have to be coded in... the frame and everything, then the iframe etc.

      A modal would be possible though, which is what Elementor Pro popups are... check the instructions in this article : https://element.how/elementor-gallery-links-pro/ , where it says Extra: Want these Elementor Gallery Images to open a Popup ?

      That should work for the image carousel element as well.

    3. Maxime Desrosiers Thank you for your answer, the elementor popups are sufficient enough because they stay on the same site.

      I changed the popup code from the gallery to:

      but it looks like it doesn't work consistently.
      Ik have 3 foto's in the caroussel. 1 foto gives always a popup, while the other 2 sometimes don't. Going back and forth in the caroussel sometimes fixes it temperary

      It looks like the problem arises after the carrousel scrolls through the images

    4. Hielke Miedema Try this code, let me know if it works well.

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

    6. Maxime Desrosiers sorry to bother you again. I have an issue again 😛

      I use this exact same configuration on a different page, but the popups won't show on that second page. I duplicated the original page (on which it's works), but still I can't get it to work on a different page.
      Then I tried to save the page as template, and import it on a fresh elementor page, but still it won't work.

      Am I missing here something?

  20. When I change the code so i get new tabs I get this error: Uncaught ReferenceError: links is not defined
    at HTMLBodyElement. ((index):456)

    Why is this or how can I fix it?
    Please and thank you!

  21. I have three image carousels on page and used the above settings to link images to a different page. This worked fine but what I want is to link to a different page and then specific text on that page. I put an id against specific text and then tried an anchor link but it will only redirect to top of page. Please help as this is a critical part of my site.

    1. The code should work just fine for anchors as well as normal links. Try validating that your anchors work fine when you use them normally...

  22. I do not understand. I used the code and all it does is redirect to top of new page but not to text link further down the page. I have another page that also has links to this page using anchor links and that works fine. It is the images in the carousel that are causing a problem and do not work.

    1. I changed the example on this very page... Click on the first image, it has a link with an anchor, and everything is working fine. I`m not certain what the issue with your setup might be...

  24. I am try to connect from an image carousel!!
    There is so much code above with details about new windows and pop ups, I just want to connect from an image carousel to another page text.

  25. That worked I put /# but did not take the / off the end. Thanks for your patience dealing with a novice. Would it be better to use css id rather than an anchor?

    1. It's essentially the same thing. The slight advantage of using CSS ID, is that you save the HTML markup from the 'Anchor' element... which isn't much, so it doesn't matter much.

    1. Hey Stephen. You have the code showing up three times on your page... delete the two that should not be there. Maybe open the navigator and find all the HTML elements you have going... delete 2 of them. Cheers!

  28. Does that mean that I use only one set of code for the whole page even thought here could be 10 carousels on that page? I just have to list all the links scrolling down the page.

  29. Removed all the extra coding but now either it says cannot find page or forwards to earlier link.(non-fiction). Also having problems with carousels on a different page (Children)

    1. Right. I just realized the code won't work in that way. However, I already have the proper instructions in the tutorial about how to make it work for multiple carousels, please read the part

      'To make it work with multiple Image Carousel elements on the same page, use the code below instead.'

      Cheers!

  30. I see the notice about multiple carousels and have added css
    classes 'carousel1' & 2 & 3 etc but the you state for the extra carousels to add a slightly different code.
    I am confused as that was what I did and it all messed up.

    1. In the tutorial, I wrote : 'To make it work with multiple Image Carousel elements on the same page, use the code below instead.'

      The code below, refers to the code right below that statement.

      If you would like expert help with this, I can go in and set everything up for you... Then send a video recording explaining how it all works, and how to make modifications. Let me know.

  31. That is a great offer. No 1 carousel is working fine and I understand that I must use the extra code for additional carousels. I tried to but failed. Where exactly do I place the code in the html? If I know I might crack this and we both can get on with our lives.:)

    1. The code provided is already all setup and ready for 3 carousels, you don't need to change anything, except enter your own links.

  32. Yes I understand but where exactly do I place the extra code. I have the code for carousel 1 in place but I cannot sort out exactly where to place the other code.

  33. It's already, all together. The code for the three carousels are all together, in one bunch, in one HTML element. Anywhere on the page, it doesn't matter... only one html element.

  34. Well I did that full code in one place on page and still I can not get it working. I am afraid I will have to take you up on the offer to set this up. These carousels are number on priority on the site.

    1. To be clear i'm offering this as paid work, as I don't normally offer free extensive tech support for my free tutorials! Hope you understand. If you are still interested, please reach me through Messenger or email, you will find them both in the footer of the website. Cheers!

  36. Great solution !
    However, I am facing an issue with my Translatepress plugin. It seems impossible to translate the URL from the HTML code 🙁

    1. Indeed, that's a limitation of the code... It would be possible to code in different links, depending on what language is currently active, however it's beyond the scope of this tutorial. Message me for custom work if you are interested!

  37. I was wondering if I could retain the url after clicking the carousel image?
    I am trying the open links in the new window.
    The url where I put the code has added: /[object%20Window] after I clicked the image thus resulting in page not found. Therefore, I needed to click the go back button in order to see the page with the carousel image.

    1. I don't know what the problem is. It should open in a new window just fine... I changed my example above with the 'new window' behaviour, you can see it's working fine.

    1. Hey Tania!

      Here is the problem. In your code, you have this :

      var links = [
      'https://amzn.to/3A9tgdH',
      'https://amzn.to/3EeltNU',
      'https://amzn.to/3nu6h9y’,
      'https://amzn.to/3C7Qf9j’,
      ‘https://amzn.to/3hNQTRX',
      'https://amzn.to/3lHFgNk’,
      ‘https://amzn.to/3CrKaEV'
      ];

      Here on my website, it all looks very similar. But you might noticed that some of these quote characters ( ' ) , are in fact curly quotes. Curly quotes are NOT proper Javascript syntax, and will break the code... replace all your quotes with normal, straight quotes ( ' ), and it will all work as it should!

      1. Thanks so much for your help! I'll go give it another shot. I really appreciate this! 🙏🏽

Leave a Reply