Add a Different Link to Each Elementor Carousel Image

Add a carousel to the page… go to Advanced Settings… add a CSS Classes (ex. ‘carousel1’)

Add an HTML block to the same page and add:


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

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

/* Edit the links HERE */
let links = [
    'https://hyperlink goes here',
    
/* Edit the links HERE */
let links = [
    'https://hyperlink goes here',

/* End the hyper link series by removing the comma at the end */
];


/* add the CSS CLASS below... which will be 'carousel1'   */

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]; */
    }
    }
});
});
</script>

/* You can add more than one carousel (with image links) by repeating this step and adding a new CSS Class and a new HTML block. Also two things, the carousel MUST be set to LOOP & the Link Setting for the carousel must be set to none; oh and if it doesn't work while logged in, view the page in Incognito */

I think that's it...