Search code examples
cssreactjsreact-responsive-carousel

How to position carousel-status in react-responsive-carousel?

I am trying to move the status indicator to the bottom-right corner, but I cannot find the way to do it.

I have added statusFormatter and custom component within, but the problem is that react-responsive-carousel renders

element so I cannot apply margin and padding from the child span.

Is there a way to position the status indicator in the bottom-right corner?

Solution

  • This is the snippet to modify it, all you need to do is change css of the class .carousel .carousel-status which is assigned to status <p> tag:

    .carousel .carousel-status {
  bottom: 0;
  left: 0;
  right: 30px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

    you can edit this snippet to suit you need.