Как перемещать индикаторы react-material-ui-carousel

У меня есть индикаторы карусели и точек. Я хотел бы переместить индикаторы снизу в круг, показанный ниже на картинке. Пробовал ставить отрицательную маржу-верх, но тогда индикаторы скрываются. Как я могу этого добиться?

      import Carousel from "react-material-ui-carousel";
import Item from "./CarouselItems/Item";
import FirstImage from "../../assets/images/first.jpg";
import LastImage from "../../assets/images/lastslide.jpg";

const CarouselComponent: React.FC = (): JSX.Element => {
  return (
    <MyCarousel
      autoPlay={false}
      swipe={true}
      indicators={true}
      indicatorContainerProps={{
        style: {
          marginTop: "-50px"
        },
      }}
    >
      <Item />
      <Item />
    </Carousel>
  );
};

export default MyCarousel;

1 ответ

другой подход, который вы можете использовать:

      indicatorContainerProps={{
        className: 'custom-indicator-container',
      }}

и вы можете использовать CSS для редактирования следующим образом:

      .custom-indicator-container {
  bottom: 10px;
}
Другие вопросы по тегам