Add document on how remove indicator when inactive (or only 1 image)

[erikdemarco]

Link to the page where something is not right

https://mantine.dev/x/carousel/#hide-inactive-controls

What is wrong?

Currently it only shows how to hide the control when inactive but the indicator still show when the image only 1.

I tried with this module css but failed:

.indicator {
    &[data-inactive] {
      opacity: 0;
      cursor: default;
    }
}

And this is out of topic, is there any way to include this css in the same file not in separate module.css file? if we create module.css only for this simple css is too much. using inline style API like this failed:

const controlStyles = {
  control: {
    '&[data-inactive]': {
      opacity: 0,
      cursor: 'default',
    }
  }
};

    <Carousel height={200} styles={controlStyles}>
      <Carousel.Slide>1</Carousel.Slide>
      <Carousel.Slide>2</Carousel.Slide>
      <Carousel.Slide>3</Carousel.Slide>
      {/* ...other slides */}
    </Carousel>

Self-service

• [ ] I would be willing to implement a fix for this issue