So i'm using the library called Swiper for my swiper , my code looks like this :

import SwiperCore, { Pagination } from "swiper";

SwiperCore.use([Pagination]);

const MainCarousel = () => {
  return (
    <Swiper
      pagination={true}
      spaceBetween={50}
      slidesPerView={1}
      onSlideChange={() => console.log("slide change")}
      onSwiper={(swiper) => console.log(swiper)}
    >
      <SwiperSlide>
        <div className="w-screen h-screen max-h-max bg-first-car bg-cover">
          Hello
        </div>
        {/* <img src={Car1} alt=""></img>  */}
      </SwiperSlide>
      <SwiperSlide>
        {/* <img src={Car2} alt=""></img> */}
        <div className="w-screen h-screen bg-second-car bg-cover">hello</div>
      </SwiperSlide>
      <SwiperSlide>
        {/* <img src={Car3} alt=""></img> */}
        <div className="w-screen h-screen bg-third-car bg-cover">hello</div>
      </SwiperSlide>
    </Swiper>
  );
};

export default MainCarousel;

mine either goes to full screen if i set h-screen , but doesn't work to just fit the image and that's it , any tips ?