React-id-swiper: Swiper-id-react + Nextjs issue with slide component rendering

[davemin]

Hi guys, this is my issue, if i use swiper hardcoding Slide divs inside Swiper component all works fine, but i need to use component and loop datas for display it, in this case the swiper component display content but don't initialize slides so the swiper doesn't work. here my code for swiper component and Slide component.

Next 9.3.1 and react-id-swiper 3.0.0

any ideas?

// swiper component
import Swiper from 'react-id-swiper';
import Slide from "../../components/Slide/Slide";

import { useEffect, useState, useCallback } from 'react';

const SimpleSwiper = () => {

      const [swiper, setSwiper] = useState(null);

      const goNext = () => {

        if (swiper !== null) {
          swiper.slideNext();
        }
      };

      const goPrev = () => {
        if (swiper !== null) {
          swiper.slidePrev();
        }
      };

      const items = [
        {
          content: "Slide1",
          idx: 1
        },
        {
          content: "Slide2",
          idx: 2
        },
        {
          content: "Slide3",
          idx: 3
        }
        ,
        {
          content: "Slide4",
          idx: 4
        }
        ,
        {
          content: "Slide5",
          idx: 5
        }
        ,
        {
          content: "Slide6",
          idx: 6
        }
      ];

      const renderItem = useCallback(
        ({ idx, content }) => (
          <Slide content={content} key={`slide_${idx}`} />
        ),[]);


        useEffect(() => {

          if (swiper !== null){
            console.log(swiper);
            setTimeout(() => {
              swiper.update();
            }, 2000)
          }

          return function cleanup(){
            if (swiper !== null){
              console.log('Destroy', swiper);
              swiper.destroy();
            }
          }
        }, [swiper])


    // Add eventlisteners for swiper after initializing

    const params = {
      slidesPerView: 3,
      centeredSlides: true,
      spaceBetween: 30,
      loop: true,
      getSwiper: setSwiper
    }

    const slides = items.map(renderItem);
//
    return (
      <>
      <Swiper {...params}>
        {slides}
      </Swiper>
      <button onClick={goPrev}>Prev</button>
      <button onClick={goNext}>Next</button>
      </>
    )
  };

export default SimpleSwiper;

//slide component
import style from "./Slide.module.scss";
import { useEffect, useState } from "react";

const Slide = ({ content }) => {
  const onClick = () => {
    alert("clicked")
  }
return <div onClick={onClick}>{content}</div>
}

export default Slide;

[davemin]

Here a sandbox:

https://codesandbox.io/s/nextjs-swiper-id-react-ire2n?fontsize=14&hidenavigation=1&theme=dark

[bke-daniel]

Hi,
maybe this helps. Let's say you have multiple options / Component Props and everything's working fine. Now, if you make use of (in your example) getSwiper: setSwiper, or generally speaking use of the getSwiper option / prop any other option / prop doesn't seem to be recognized anymore.

Cheers

[motrdevua]

@davemin one thing helped me with the same problem. Just add observer: true, to params object

[ljhyeok]

@davemin I have a same issue. Did you solve this problem....? 😭

[ljhyeok]

@motrdevua I did it but not working....😢
like this

import React from 'react';
import Swiper from 'react-id-swiper';
import 'swiper/css/swiper.css';

// https://swiperjs.com/api/#events
const params = {
  simulateTouch: false,
  allowTouchMove: false,
  observer: true,
};

export const Steps = ({ children, ...rest }) => {
  return (
    <Swiper {...params} {...rest}>
      {children}
    </Swiper>
  );
};

export default Steps;

[ljhyeok]

@davemin @motrdevua
sorry, I solve this problem.

In my case, just need withRouter.
I wrapped page component using withRouter of nextjs function.
like this....

import React from 'react';
import {withRouter} from 'next/router';

const Page = () => {
  return <div><Swiper/></div>
}

export default withRouter(Page);

then, swiper do normally.
In my case, not a react-id-swiper problem...