✅ 🚀 Feature Request: Image carousel multiple custom URLs

[itsbrex]

I'm building a carousel with multiple event fliers that each should link to a specific event page, but can't seem to add custom links for each image. Is this possible already and I'm just missing something? I didn't see anything in the docs.

[yehudah]

Hi,

Hope to add in in future release.

[lunacroft]

Me too! But mine is partner carousel with images and individual partner url. Carousel and Gallery could have separate url per image.

[itsbrex]

@lunacroft pretty much exactly what I'm thinking. 😄 👍

[heddesheimer]

+1 from me too.

[hansnolte]

As lunacroft has already said... "Carousel and Gallery could have separate url per image."

[mediaworksmt]

I'm also hoping to see this feature in the future! :-)

For now, here's an extremely quick & dirty work-around:

1. Open /wp-content/plugins/elementor/includes/widgets/image-carousel.php and replace the code inside with the code from this attached .TXT file.
2. When adding/editing the Image Carousel element in Elementor, set Link to to Custom URL. Then in the field that appears, enter each of your URLs, separated by commas. (NO SPACES.)

EXAMPLE: /home,/about-us,https://google.com,/testimonials

The first URL will be for image #1, the second for image #2, the third for image #3, so on and so forth.

PLEASE NOTE that if you update Elementor, these code changes will get overwritten, so you'll need to once again replace the image-carousel.php file.

I hope to contribute a more elegant solution in the near future.

[ghost]

Should we continue to do this with the @mediaworksmt work around or is there a chance to see it in a future release? thanks

[JoelEadeDesign]

+1

This feature/issue has just come up on a client project. My client wants their staff shown in an image carousel on the home page, with each image linking to their own URL i.e. an anchor tag on the staff page.

[sarath-c-sandwich]

I am totally need this, look like the request made since July last year. 👍 likely help to work on this. Thanks,

[salvimateus]

Please do this functionality, it is very much needed. The plugins that do this, have ugly design. Even if it is a "pro" feature.

[JoelEadeDesign]

I have a jQuery work-around if anyone wants it.

[WPDevHQ]

@JoelEadeDesign - Please share :)

[JoelEadeDesign]

Hello! Apologies for the delay. Here's a walk-through of how I'm creating individual URLs for the Image Carousel: https://www.useloom.com/share/6c6f4746c1f24b9bae849a2b5a1ec428

In my example, I've linked to anchor tags on the same page but you could link to different URLs with some minor tweaks.

The code referenced in the video is in the description in Loom.

[peterrath]

+1

[BradMK]

Was very surprised that this was not the option from the very begining.

[MaliBacek]

@mediaworksmt, if I change the php all it does is puting just an image one unnder the other inmstead of the slideshow. They do have the correct link though, but not really helpful.

@JoelEadeDesign, where do you put your code? Sorry, a bit new to all this.

Has anyone else find a simpler solution to this?

[JoelEadeDesign]

Hey @MaliBacek. It depends on your theme but the quickest way is to add it to your theme's footer.php wrapped in a

<?php

} add_action('wp_footer', 'wpb_hook_javascript');`

I still recommend buying the pro version of Elementor, as I did, to take advantage of the Media Slider Carousel and support the awesome plugin developers.

[morceaudebois]

here is a small javascript code that will help you add individual links to carousel images. all you need to do is add an id 'carouselPartners' to carousel and add all the links separated by ';' in custom link adress in the same order than images in gallery.

<script type="text/javascript"> var link = jQuery('#carouselPartners').find(".slick-slide-inner a").attr('href'); var links = link.split(';'); var elements = jQuery('#carouselPartners').find(".slick-slide-inner a"); for (var i = elements.length - 1; i >= 0; i--) { elements[i].href = links[i]; } </script>

Here's the updated version with the new class names. Works very well if you put it in an HTML widget after the slider :)

<script type="text/javascript">
    var link = jQuery('#carouselPartners').find(".swiper-slide a").attr('href');
    var links = link.split(';');
    var elements = jQuery('#carouselPartners').find(".swiper-slide a");

    for (var i = elements.length - 1; i >= 0; i--) {
        elements[i].href = links[i];
    }
</script>

[andretoldo]

+1 for me too =)

[kimengelen]

@Tahoooe What should I do after I placed the the code into the HTML widget? Since it is not yet working. Thank you so much!!

[morceaudebois]

@kimengelen Did you put the ID carouselPartners on the carousel? Also, are you using the right syntax for the links? Like this: https://youtube.com;https://github.com/;https://www.reddit.com/

[dv1961]

@Tahoooe Similar problem for me, I just don't know where the link are to be put. Can you help?

[maximedesro]

I wrote a small write up for this here https://elementorcodes.com/elementor-image-carousel-links/ . let me know if it helps!

[bodhi1970]

Finally Media Carousel is here with Custom URL for every slide, released in E-Pro v1.9.0

Thanks everyone for your feedback!

What do I have to do to make that happen? It doesn't work for me. :(

[innovs]

@guys,

you can try this plugin- CSS For Elementor See how it works- https://www.youtube.com/watch?v=j4J1eXL9gKQ&t=24s

[Panda805]

https://nulledfree.pw/nulled-extensions-plugins/nulled-wordpress-plugins/elementor-pro-page-builder-nulled-crack-download/

[ZhaoYun17]

It's July 2020, AKA 4 years later. I can't believe this feature wasn't implemented yet.

[JoelEadeDesign]

Happy Birthday to this issue. Happy Birthday to this issue. It will never get addressed. Happy Birthday to this issue 🎉

[M-Marbouh]

This will never be implemented in the free Elementor because it's a feature of the pro version. "Media Carousel"