React-id-swiper: Can I use component inside Swiper?

[billyyyyy]

I am trying to use Swiper to wrap a list of components with the coverflow effect but it doesn't work. It seems that the children of Swiper can only be <div>. Thanks for any help.

const params = {
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true
},
pagination: {
el: '.swiper-pagination'
},
shouldSwiperUpdate: true,
rebuildOnUpdate: true
}

<Swiper {...params}><Item /><Item /><Item /></Swiper>

[kidjp85]

Hi @billyyyyy , you can wrap component inside Swiper.
In your case, you're using composite component (a component comprised of other components), so you need to provide props className within Item component for Swiper to add swiper-slide class name to each slide.
For more detail you can check a demo I made here.