I have been attempting to integrate Carousel libraries into my react app, but I am encountering a common issue with all of them. The Carousels show the items on the first slide, but subsequent slides do not display any items, even though they exist within the carousel and I can switch to the next slide.
The libraries I have tried so far include SwiperJS, Embla-Carousel, and React-Responsive-Carousel.
In the example provided using SwiperJS, there are 5 items in the Carousel:
Slide 1 - Showing 3 items on each slide
Slide 2 - Displaying 3 items on each slide
Although I can navigate through the carousel, it only displays the items from the first slide and cuts off the rest. I confirmed that all 5 items exist by displaying them all on one slide:
Displaying all 5 items on one slide
This issue persists across other carousel libraries as well, and I have been stuck on it for 3 days. Any assistance would be highly appreciated.
Below is the JSX code for your reference:
import "./extraspace.scss"
import { Navigation, Pagination } from 'swiper';
// Direct React component imports
import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';
// Styles must use direct files imports
import 'swiper/swiper.scss'; // core Swiper
import 'swiper/modules/navigation/navigation.scss'; // Navigation module
import 'swiper/modules/pagination/pagination.scss'; // Pagination module
export default function ExtraSpace() {
return (
<div className="page">
<Swiper
className="swiper-container"
spaceBetween={50}
slidesPerView={3}
onSlideChange={() => console.log('slide change')}
onSwiper={(swiper) => console.log(swiper)}
>
<SwiperSlide className="swiper-slide">Slide 1</SwiperSlide>
<SwiperSlide className="swiper-slide">Slide 2</SwiperSlide>
<SwiperSlide className="swiper-slide">Slide 3</SwiperSlide>
<SwiperSlide className="swiper-slide">Slide 4</SwiperSlide>
<SwiperSlide className="swiper-slide">Slide 5</SwiperSlide>
</Swiper>
</div>
)
}
Below is the SCSS code snippet:
.page{
display: flex;
align-items: center;
}
.swiper-container{
width: 50%;
height: 50%;
border: solid black;
.swiper-slide{
border: solid red;
}
}