Image gallery with Ionic React using Ionic-Swipe

Question

My client requested an image gallery feature. Such that I will have an array of images and on clicking each image, I will get like a modal that shows all the images available one by one. I want to achieve this with the Ionic Swiper Component. The example below is for Ionic-Angular, I need Ionic-React.

https://www.youtube.com/watch?v=BGoL0uWRTrY

Is there a way to open the image as a gallery and have zoom, prev and next swipe functionality?

<div className="mt-2">
              <IonSlides ref={slideRef} options={slideOpts}>
                {bridImages.map((image, idx) => (
                  <IonSlide key={idx} className="img-container">
                    <img
                      src={image.url}
                      alt={image.alt}
                    />
                  </IonSlide>
                ))}
              </IonSlides>
            </div>

Or if there's any other library that is mobile friendly and can also work with Ionic-React, please let me know.

not sure what the question here is, you already have the code for images in a slide, so what is missing? Putting it a modal? — Aaron Saunders, May 08 '21 at 22:09

score 1 · Answer 1 · answered May 10 '21 at 18:07

<IonSlides
  options={slideOpts}
  ref={mySlides}
  onIonSlideDidChange={handleSlideChange}
>

list with the event handler and get the swiper object which holds the activeIndex

const handleSlideChange = async () => {
  const swiper = await mySlides.current.getSwiper();
  console.log("Slide Index", swiper.activeIndex);
  // setDisablePrevBtn(swiper.isBeginning);
  // setDisableNextBtn(swiper.isEnd);
};

See working project - https://codesandbox.io/s/ionic-react-slides-jq57g
See video describing code and more - https://youtu.be/mCkrZYIbH10

Image gallery with Ionic React using Ionic-Swipe

1 Answers1