How can I remove blank space in react-slick and tailwindCss

I'm a beginner at react-slick.

<div className="container mx-auto">
  <Slider {...settings}>
    <div className="relative w-full h-[60vh] md:h-screen">
      <Image src={one} layout="fill" alt="photo" />
    </div>
  </Slider>
</div>

When I add one image, it works as it is intended to.


but I add more images, it makes a blank space right side.

<div className="container mx-auto">
  <Slider {...settings}>
    <div className="relative w-full h-[60vh] md:h-screen">
      <Image src={one} layout="fill" alt="photo" />
    </div>
    <div className="relative w-full h-[60vh] md:h-screen">
      <Image src={two} layout="fill" alt="photo" />
    </div>
  </Slider>
</div>

what is the problem...? and how can I fix it? this is my react-slick settings

const settings = {
  dots: true,
  infinite: true,
  speed: 500,
  slidesToShow: 1,
  slidesToScroll: 1,
  initialSlide: 0,
  autoplay: true,
  draggable: true,
  pauseOnHover: true,
  fill: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        infinite: true,
        dots: true,
      },
    },
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        infinite: true,
        dots: false,
      },
    },
  ],
}

It will most likely be that when you add a second slide the previous and next buttons get added. These are positioned absolutely and will cause the additional gap to the right.

You could try hiding them like this:

 .slick-prev, .slick-next {
   display: none;
 }

Or if you want them visible try positioning them with left and right values.