How to Add Individual URL Links to Elementor's Image Carousel Widget (No Plugins Required)

If you've been working with Elementor's Image Carousel widget, you've probably encountered a frustrating limitation: the inability to add unique URL links to each individual image. Despite being one of the oldest feature requests in the Elementor community, the "Custom URL" option still only provides a single field that applies the same link across all images.

Today, I'm going to show you a simple code snippet that solves this problem once and for all—no plugins required.

The Problem with Elementor's Default Settings

When you select "Custom URL" in Elementor's Image Carousel link options, you're limited to applying one URL to every image in your carousel. This is far from ideal when you want each image to link to a different page, product, or resource.

The workaround I'm sharing today uses a simple JavaScript snippet that allows you to define individual URLs for each image in your carousel.

Prerequisites: Setting Up Your Carousel

Before implementing the code snippet, you need to configure your Image Carousel widget properly. Follow these three essential steps:

1. Set Link Option to "None"

Change the link option from "Custom URL" to "None." This prevents interference with our custom code snippet.

2. Enable Infinite Loop

In the Additional Options settings, make sure to enable the infinite loop feature. This ensures the code works correctly as users navigate through the carousel.

3. Add a CSS Class

Navigate to the Advanced tab of your widget and assign the CSS class carousel-links to it. This class is crucial for the code to target the correct carousel on your page.

The Code Snippet

Here's the complete code snippet you'll need to add to your page:

html

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

<script>
document.addEventListener('DOMContentLoaded', function () {
    /* Edit the URL Links Here */
    let links = [
        'https://one.com/',
        'https://two.com/',
        'https://three.com/',
        'https://four.com/',
    ];
    
    document.body.addEventListener('click', function (e) {
        if (e.target.closest('.carousel-links .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]);
            }
        }
    });
});
</script>

How to Customize the URLs

Customizing the links for your specific needs is straightforward:

1. Locate the links array in the code snippet

2. Replace the predefined URLs (https://one.com/, https://two.com/, etc.) with your desired links

3. Ensure each URL is enclosed within single quotation marks

4. Separate each URL with a comma

5. Add or remove URLs as needed to match the number of images in your carousel

Example:

javascript

let links = [
    'https://yoursite.com/page1/',
    'https://yoursite.com/page2/',
    'https://yoursite.com/page3/',
];

Opening Links in the Same Tab (Optional Modification)

By default, the code snippet opens links in a new browser tab using window.open(links[i]). If you prefer links to open in the same tab, simply modify this line to:

javascript

window.location.href = links[i];

This small change ensures a more seamless browsing experience for users who prefer to stay within the same tab.

Testing Your Implementation

After adding the code snippet to your page, it's important to verify that everything works correctly:

1. Preview your page

2. Click on each image in the carousel

3. Confirm that each image links to its corresponding URL

4. Test the infinite loop functionality to ensure links work correctly when cycling through images

Why This Solution Works

This approach leverages Elementor's underlying Swiper library (which powers the carousel) by targeting each slide's data-swiper-slide-index attribute. When a user clicks on an image, the script identifies which slide was clicked and opens the corresponding URL from your links array.

The CSS addition changes the cursor to a pointer when hovering over images, providing a visual cue that the images are clickable.

Conclusion

While it's disappointing that Elementor hasn't built this functionality natively after years of user requests, this code snippet provides a clean, plugin-free solution that's easy to implement and customize.

Whether you're building a portfolio, showcasing products, or creating an image gallery with unique destinations, you now have the power to make each carousel image link exactly where you want it to go.

Source: https://www.youtube.com/watch?v=ort3yK6gtaY