Estoy tratando de obtener los valores de una tarjeta específica cuando se hace clic en swiperJS, pero no encuentro en la documentación si es posible hacerlo.
Con la esperanza de no recurrir a envolver cada diapositiva en una etiqueta y un botón de entrada.
Mi código aquí:
<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>¿Es posible hacerlo?
Mirando el código fuente de reacción de Swiper, parece que SwiperSlide se representa de forma predeterminada en un nodo div . Este nodo puede recibir una propiedad onClick , que debería ejecutar cualquier función que desee. Eso se vería algo como esto:
<SwiperSlide onClick={()=> console.log(card.name)}> // ... </SwiperSlide> Si por alguna razón eso tampoco funciona, considere agregar onClick a un div que ya envuelve la diapositiva (por ejemplo div.col-12.swiper-container )