Swiper Js 3D Coverflow Effect on 1 side only

Question

I create a swiper slider in nextjs using it 3D Coverflow plugin.. but i want to achive something else.. here is my code and also what i want to achieve..

<Swiper
        effect={"coverflow"}
        grabCursor={true}
        centeredSlides={true}
        slidesPerView="0"
        loop={false}
        autoplay={false}
        breakpoints={{
          0: {
            slidesPerView: 1,
            spaceBetween: 10,
          },
          500: {
            slidesPerView: 1,
            spaceBetween: 10,
          },
          640: {
            slidesPerView: 2,
            spaceBetween: 10,
          },
          768: {
            slidesPerView: 3,
            spaceBetween: 20,
          },
          1024: {
            slidesPerView: 3,
            spaceBetween: 0,
          },
        }}
        coverflowEffect={{
          rotate: 0,
          stretch: 0,
          depth: 100,
          modifier: 2.5,
          slideShadows: true,

        }}
        navigation={{
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
          clickable: true,
        }}
        modules={[Autoplay, Navigation, EffectCoverflow, Pagination]}
        className="swiper-container teamslider"
      >
        <SwiperSlide>
          <div className="teamSlide position-relative">
            <Image
              src={img}
              alt="Team 1"
              className="img-fluid teamImg"
              width={500}
              height={500}
            />
            <div className="team_contact_con">
              <div className="contact_inner">
                <a
                  href="#"
                  className="memName text-decoration-none font-heading text-white"
                >
                  <p className=" Vista_para_l m-0 mb-2">Ali Zahid</p>
                </a>
                <div className="designation teamsub pt-2">CEO</div>
                <div className="social_icon">
                  <ul>
                    <li>
                      <a href="#">
                        <i className="bi bi-facebook"></i>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <i className="bi bi-instagram"></i>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <i className="bi bi-linkedin"></i>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </SwiperSlide>
        <SwiperSlide></SwiperSlide>
        <SwiperSlide></SwiperSlide>
        <SwiperSlide></SwiperSlide>
        <SwiperSlide></SwiperSlide>
        <SwiperSlide></SwiperSlide>
        <SwiperSlide></SwiperSlide>

        <div className="slider-controler">
          <div className="swiper-button-prev slider-arrow">
            <ion-icon name="arrow-back-outline"></ion-icon>
          </div>
          <div className="swiper-button-next slider-arrow">
            <ion-icon name="arrow-forward-outline"></ion-icon>
          </div>
        </div>
      </Swiper>

enter image description here

enter image description here

This is what i was getting.. and here is what i want

enter image description here

Please help me to get rid from this.. Thanks