CODEWITHSUNDEEP
reactjsreact-slick
Marviano
Marviano

Reputation: 137

Adding Modal Popup on Each Image Inside React Slick Slider

I want to show modal popup everytime the image is clicked on my react-slick's slider, and totally have no idea on how to do it. my slider is receiving image from array

I want to assign each image to have unique onClick function

example : onClick={berryModal}, onClick={melonModal}, onClick={grapeModal}

What i tried so far, i don't know how to assign unique onClick function to each image :

  const [showModal, setShowModal] = useState(false)

  const openModal = () => {
    setShowModal(prev => !prev)
  }

This is my react-slick's slider settings :

    infinite: true,
    slidesToShow: 4,
    centerMode: true,
    centerPadding: 0,
    dots: true,
    autoplay: true,
    speed: 1000,
    autoplaySpeed: 2500,
    cssEase: "linear",
    beforeChange: (current, next) => setImageIndex(next),
    nextArrow: <NextArrow />,
    prevArrow: <PrevArrow />

This is how i show my react-slick's slider on my page :

return (
      <Slider {...settings}>
        {images.map((img, idx) => (
          <div className={idx === imageIndex ? "slide AutoPlay" : "slide"}>
            <img src={img} alt={img} onClick={"imagename"+modal}/>
            //i wan't to know the proper way to give onclick function name
          </div>
        ))}
      </Slider>
  );
}

Upvotes: 0

Views: 2009

Answers (1)

yugantar
yugantar

Reputation: 2210

What you can do here is, define a render a common modal outside this Slider but in the same component.

You can display the image in the Modal using the URL of the image from the current slider index.

return(
    <>
      <Modal><img src={currentSliderIndexUrl} /></Modal>
      <Slider> {your images here} </Slider>
    <>
)

Upvotes: 1

Related Questions