0

I have a requirement where on click of lightning-carousel dots, we need to get the lightning-carousel-image that got clicked and we need to process the logic based on the selected image. Here I need to have onclick event on lightning-carousel only and not on lightning-carousel-image

enter image description here

Eg: LWC component

<lightning-carousel disable-auto-scroll onclick= {findClickedElement}>
    <lightning-carousel-image
        header={First Card}
        description="First card description." 
        data-name="First Card">      
    </lightning-carousel-image>
    <lightning-carousel-image
        header={Second Card}
        description="Second card description."
        data-name="Second Card">
    </lightning-carousel-image>
    <lightning-carousel-image
        header={Third card description.}
        description="three"
        data-name="Third Card">
    </lightning-carousel-image>

LWCJs:

export default class lwcClassJs extends LightningElement {
   findClickedElement(event){
      let element = this.template.querySelector("lightning-carousel");
      console.log('@@element-->'+element);
      //Here I am not able to get the <lightning-carousel-image> that is clicked in UI. 
   }
}

Can anyone please help me how to get the lightning-carousel-image that is displayed on the click of dot?

Improve this question
2
  • Do you want to perform logic when the dot is clicked or when the image is clicked?
    – Gargi Gupta
    Commented Dec 20, 2023 at 9:08
  • @GargiGupta I want to perform the logic on click of dot. For that I wanted to know which image is getting displayed on click of dot
    – Sindhuja
    Commented Dec 21, 2023 at 7:55

0

Reset to default

You must log in to answer this question.