Swiper-id-react + Nextjs issue with slide component rendering
See original GitHub issueHi 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:
- Created 4 years ago
- Reactions:4
- Comments:6
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@davemin @motrdevua sorry, I solve this problem.
In my case, just need
withRouter
. I wrapped page component usingwithRouter
of nextjs function. like this…then, swiper do normally. In my case, not a react-id-swiper problem…
@davemin one thing helped me with the same problem. Just add
observer: true,
to params object