Ion-slides thumbs gallery

Hello everyone, i’m trying to recreate

[https://github.com/nolimits4web/Swiper/blob/01957a47ff139dea7170b320ea9abe316b234984/demos/310-thumbs-gallery-loop.html](http://Swiper.js example of thumbs gallery)

with Ionic React. I’m guessing i need two sliders on screen, but i cant recreate it. Do anyone have any idea how i can achieve that ?

do you have some code to provide feedback on?

Sure, sorry.

const PlantCarousel = (props: Props) => {
  const { plants } = props;
  const [swiper, setSwiper] = useState<any>({});

  const thumbSlider = {
     spaceBetween: 10,
     slidesPerView: 1,
     freeMode: true,
     watchSlidesVisibility: true,
     watchSlidesProgress: true
   };

  const singleSlider = {
    spaceBetween: 10,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    },
    thumbs: {
      swiper: swiper
    }
  };

  const init = async function (this: any) {
    setSwiper(await this.getSwiper());
  };

  return (
    <>
      <IonSlides onIonSlidesDidLoad={init} scrollbar={true} options={singleSlider} mode="ios" className="single-slider">
        {plants.map((plant: Plant) => {
          return (
            <IonSlide>
              <img src={plant?.image}></img>
            </IonSlide>
          );
        })}
      </IonSlides>

      <IonSlides options={thumbSlider} mode="ios" className="thumbs-slider">
        {plants.map((plant: Plant) => {
          return (
            <IonSlide>
              <img src={plant?.image}></img>
            </IonSlide>
          );
        })}
      </IonSlides>
    </>
  );
};

This is my current status.I am managing to display both, just need to find the way to connected them in a way the example is shown. (When swiping single slider, thumbs are swiped too, and when tap on one photo from thumbs, the single is changed to selected one).
I’ll update this topic when i manage to do that. If you are able to help it will be most welcome

interface Props {
  plants: Plant[];
}

const PlantCarousel = (props: Props) => {
  const { plants } = props;

  const [singleSwiper, setSingleSwiper] = useState<any>({});
  const [thumbsSwiper, setThumbsSwiper] = useState<any>({});

  const singleSlider = {
    spaceBetween: 10,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    },
    thumbs: {
      swiper: singleSwiper
    }
  };

  const thumbSlider = {
    spaceBetween: 10,
    slidesPerView: 3,
    freeMode: true,
    watchSlidesVisibility: true,
    watchSlidesProgress: true
  };

  const initSingle = async function (this: any) {
    setSingleSwiper(await this.getSwiper());
  };

  const initThumbs = async function (this: any) {
    setThumbsSwiper(await this.getSwiper());
  };

  const swipe = async function (this: any) {
    thumbsSwiper.slideTo(await this.getActiveIndex());
  };

  const tap = function (index: number) {
    singleSwiper.slideTo(index);
  };

  return (
    <>
      <IonSlides
        onIonSlidesDidLoad={initSingle}
        scrollbar={true}
        options={singleSlider}
        mode="ios"
        className="single-slider"
        onIonSlideDidChange={swipe}
      >
        {plants.map((plant: Plant) => {
          return (
            <IonSlide key={plant.id}>
              <img src={plant?.image}></img>
            </IonSlide>
          );
        })}
      </IonSlides>

      <IonSlides options={thumbSlider} mode="ios" className="thumbs-slider" onIonSlidesDidLoad={initThumbs}>
        {plants.map((plant: Plant, index: number) => {
          return (
            <IonSlide key={plant.id} onClick={() => tap(index)}>
              <img src={plant?.image}></img>
            </IonSlide>
          );
        })}
      </IonSlides>
    </>
  );
};

export default PlantCarousel;

This is basic solution, without styling just logic. It might come handy to someone trying to replicate same thing.

@aaronksaunders I loved your Using React Hook Form v6+ with Ionic React article, it was great help. Thank you

1 Like