question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Swiper-id-react + Nextjs issue with slide component rendering

See original GitHub issue

Hi guys, this is my issue, if i use swiper hardcoding Slide divs inside Swiper component all works fine, but i need to use <Slide /> 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;

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:4
  • Comments:6

github_iconTop GitHub Comments

5reactions
ljhyeokcommented, May 21, 2020

@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…

2reactions
motrdevuacommented, Apr 20, 2020

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

SwiperJS styling does not work with NextJS - Stack Overflow
In my case, my slider is a Component and there is a folder called Slider with index.
Read more >
Swiper React Components
SwiperSlide component can accept render function that receives an object with the following properties: isActive - true when current slide is active; isPrev...
Read more >
swiper.activeindex react | The AI Search Engine You Control
js → react-dom/umd/react-dom.production.min.js. Known Issues. The server renderer crashes in production with inline styles. (https://github.com ...
Read more >
Next.js Blog Application with Tailwind CSS - For Beginners [#7]
In this course, you are going to learn how to use next. js for real work examples. ... with Tailwind CSS - For...
Read more >
react-responsive-carousel - npm
Responsive; Mobile friendly; Swipe to slide; Mouse emulating touch; Server side rendering compatible; Keyboard navigation; Custom animation ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found