(please ignore my English i'm from India) this above image show when swiper create loop is not working until i manually slide. here is my swiper code. when i slide then loop show all duplicate slides.
function TrendingIGO({ trIGO, loading }) {
const [state, setState] = useState({
dataISNull: false,
isLoading: true
})
const [swiperInstance, setswiperInstance] = useState(null)
const swiperSlide = useSwiperSlide();
const [data, setData] = useState([])
useEffect(() => {
setState(prev => {
return {
...prev,
isLoading: loading
}
})
if (!state.isLoading) {
trIGO.data !== null ? setData(trIGO.data.filter(igo => igo.trending < 6).sort((a, b) => a.trending - b.trending))
: setState(prev => {
return {
...prev,
dataISNull: !prev.dataISNull
}
})
}
}, [trIGO, loading])
const onSwiperStart = (swiper) => {
console.log(swiper.activeIndex)
// swiper.slidePrev()
}
return (
<div className='Trending-IGO title-mrgn'>
<h1 className='home-title'>TRENDING IGO</h1>
<div className='ctn-mrgn'>
{
state.dataISNull
? state.dataISNull ? <NoData msg={"No Trending IGO"} /> : <div className='trigo-skl-live'><TrIgoSkeleton count={1} /></div>
: state.dataISNull ? <NoData msg={"No Trending IGO"} /> :
<Swiper
className='trending-igo-slider'
onSwiper={(swiper => onSwiperStart(swiper))}
initialSlide={0}
spaceBetween={30}
effect={"coverflow"}
grabCursor={true}
centeredSlides={true}
slidesPerView={"auto"}
coverflowEffect={{
rotate: 0,
stretch: 0,
depth: 150,
modifier: 1,
slideShadows: false,
}}
pagination={false}
modules={[EffectCoverflow]}
loopedSlides={5}
loop={true}
breakpoints={{
1080: {
spaceBetween: 50,
},
}}
>
{
data.map((igo, index) => {
return (
<SwiperSlide key={index} >
<IgoLayout igo={igo} />
</SwiperSlide>
)
})
}
</Swiper>
}
</div>
</div>
)
}
getting data from server and its working fine but loop is not working properly below image show how its look when its work perfectly. enter image description here
