Add click event to action for displayed image

[Wil van Antwerpen]

Hi,

I was wondering what would be the best way to add a mouse click event to the carousel control in a way that you can action on the image that is currently displayed in the carousel.

Like for example you see in websites where a carousel rotates through popular products that you can explore further by clicking on the image shown.

Thanks,
Wil

[Vijay Ravi]

Hi Wil van Antwerpen,

To fulfill your request, we recommend binding the onclick event directly within the carousel template to properly attach the event handler, as demonstrated in the code snippet below. Please refer to the sample provided for your reference. Kindly give it a try, and let us know if you encounter any issues.

[index.js]
 

items: [

        {

            template: '<figure class="img-container"><img src="//ej2.syncfusion.com/javascript/demos/src/carousel/images/bridge.jpg" alt="bridge" style="height:100%;width:100%;" onclick="handleBridgeClick()" /><figcaption class="img-caption">Golden Gate Bridge, San Francisco</figcaption></figure>'

        },

        {

            template: '<figure class="img-container"><img src="//ej2.syncfusion.com/javascript/demos/src/carousel/images/trees.jpg" alt="spring_trees" style="height:100%;width:100%;" onclick="handleTreesClick()" /><figcaption class="img-caption">Spring Flower Trees</figcaption></figure>'

        }

    ]

Sample link: https://stackblitz.com/edit/v431kk-b8umnh?file=index.js

Don't hesitate to get in touch if you require further help or more information.

Regards,

Vijay

[Wil van Antwerpen]

Hi Vijay,

Thanks for the suggestion.
Sadly this will not work in this case as the images are loaded from a database and as such setting a different onclick event for each event is not very doable.

Setting the event at that level would also mean it won't be part of the wrapper class, but instead have to be defined globally.

For now the workaround was to set an onClick event on the wrapper class, instead of on the syncfusion control itself and that appears to work.

thanks,
Wil

[Vijay Ravi]

Hi Wil van Antwerpen,

To attach the click event to the carousel item container instead of directly within the template, you can utilize event delegation. This approach allows you to handle click events for dynamically loaded images without the need to specify individual onclick handlers in the template. Simply add a click event listener to the carousel container and use event delegation to identify the clicked image, enabling you to manage the event efficiently.

In this shared example, the click event is added to the carousel-container element. When an image inside the container is clicked, the event handler checks the alt attribute of the clicked image to determine which specific handler function to call. This approach allows you to handle click events for dynamically loaded images without setting individual onclick handlers in the template.

Sample link: Glnshy (forked) - StackBlitz

Don't hesitate to get in touch if you require further help or more information.

Regards,

Vijay

[Wil van Antwerpen]

Hi Vijay,

Thanks, I added the following lines to get the current item instead of the Alt text (which might not be unique):

        let sItem = carouselObj.selectedIndex.toString();

        console.log('index = '+ sItem)

and that works for me.

best regards,

Wil

[Vijay Ravi]

Hi Wil

Thanks for your update. We are glad to know that your issue has been resolved. Please get back to us if you need any other assistance.

Regards,
Vijay