I'm using SwiperJS with React, and I'm trying to implement a layout where one slide is always positioned at the center of the screen, and a portion of the next slide fills up any remaining space to the right.
The Swiper Documentation shows I can specify the number of slides at each breakpoint, but I'm struggling with making the next image fill up the remaining space between those breakpoints where I set the slidesPerView.
How can I go about implementing this?
I handled it by making the swiper container's width wider than the page and setting overflow-x:hidden on the parent container
<section className={`overflow-x-hidden`}>
<div className="css-to-set-swiper-container-width">
<Swiper
onBeforeInit={(swiper) => {
swiper.params.navigation.prevEl = prevRef.current;
swiper.params.navigation.nextEl = nextRef.current;
}}
navigation={{ nextEl: nextRef.current, prevEl: prevRef.current }}
breakpoints={{
640: { slidesPerView: 2},
}}
slidesPerView={1.5}
spaceBetween={10}
loop={true}
>
{data.map((item, idx) => {
return (
<SwiperSlide>
<CardComponent content={item} />
</SwiperSlide>
);
})}
</Swiper>
</div>
</section>