I am trying to get the values of a specific card when it is clicked in swiperJS but am not finding in the documentation if it is possible to do so.
Hoping to not resort to wrapping each slide in a label and input button.
My code here:
<Swiper
slidesPerView={'auto'}
spaceBetween={200}
centeredSlides={true}
pagination={{
"clickable": true
}}>
{Cards.map((card, idx) => {
return (
<div className="row" style={{ display: 'inline-block' }}>
<div className="col-12 swiper-container">
<SwiperSlide>
<Cards
number={card.number}
name={card.name}
expiry={card.expiry}
cvc={card.cvc}
// focused={focus}
/>
</SwiperSlide>
</div>
</div>
)
})}
</Swiper>
Is it possible to do so?
Looking at swiper's react source code it seems like SwiperSlide renders by default into a div node . This node can receive a onClick prop, which should execute whatever function you want. That would look something like this:
<SwiperSlide onClick={()=> console.log(card.name)}>
// ...
</SwiperSlide>
If for some reason that doesn't work either, consider adding the onClick to a div already wrapping the slide (for example div.col-12.swiper-container)