SwiperJS. Chaging the position of the first and last item

Question

I'm working on a react component that uses Swiper v11 and I have a particular requirement that I'm struggling to implement. When the user is seeing the first item he should also be able to see part of the next. For the last, he should be able to see part of the previous. For the remaining, he should see only the current slider.

The code below creates a nice version where you can see part of the next and/or part of the previous. But I'm struggling to achieve the exact behavior I need.

           <Swiper
          ref={sliderRef}
          slidesPerView={1.5}
          centeredSlides={true}
          spaceBetween={30}
          pagination={{
            enabled: false
          }}
          scrollbar={{
            enabled: true,
            el: '.'+ scrollbarClassName
          }}
          modules={[Scrollbar]}
          className="cmp-slider-mobile"
          onSlideChange={(swiper) => {
            setActiveIndex(swiper.activeIndex);
            if (props.onItemSlide) {
              props.onItemSlide(swiper.activeIndex);
            }
          }}
          onActiveIndexChange={(swiper) => {
            if(props.onClickNext && swiper.activeIndex > swiper.previousIndex) {
              props.onClickNext(swiper.activeIndex)
            }
            if(props.onClickPrev && swiper.activeIndex < swiper.previousIndex) {
              props.onClickPrev(swiper.activeIndex)
            }
          }}
        >
          {sliderItems.map((item, index) => {
            return (
              <SwiperSlide key={index}>
                {item}
              </SwiperSlide>
            );
          })}
        </Swiper>

Would you have any suggestion of something in the swiper api I could use to achieve this? if not, some Styling tip I could use?

Thanks in advance for any help