Carousel buttons overflowing full width page layout

[ridhwaans]

I have a few carousel components in a nextjs page with root layout.tsx. There is also a Nav component floating left
I use the Carousel component however I think the absolute positioning of the left and right arrow turn buttons are causing a horizontal scrollbar on what is supposed to be a full width page

Below is the additional styling I have

 <Carousel
        opts={{
          align: 'start',
          loop: true,
        }}
        className="grid relative w-full"
      >
        <CarouselContent className="-ml-1">

Thanks in advance
https://ui.shadcn.com/docs/components/carousel

[toniuyt123]

Did you manage to solve this?

[ridhwaans]

yes, add absolute position css to CarouselPrevious and CarouselNext to be within the carousel container

      ...
      </CarouselContent>
        <div className="absolute top-1/2 left-2 flex items-center justify-center">
          <CarouselPrevious className="relative left-0 translate-x-0 hover:translate-x-0 hover:bg-primary/90" />
        </div>
        <div className="absolute top-1/2 right-2 flex items-center justify-center">
          <CarouselNext className="relative right-0 translate-x-0 hover:translate-x-0 hover:bg-primary/90" />
        </div>
     </Carousel>