Блог

я пытаюсь сделать так, чтобы мой слайдер выглядел отзывчивым в телефонах. я создал веб-приложение с помощью Reactjs и начальной загрузки.

вот мой код:

CSS

 .carousel{
  width:100%;
    height:500px;
    margin: auto;
  }
  .carousel > img {
    margin: 0 auto;
  }
h3{
    color:black;

  }
 

файл js:

  <Carousel className="carousel">
        <Carousel.Item interval={2000}>
          <img
            className="d-block mx-auto"
            src="https://i.imgur.com/4kZFFp9.png"
            alt="First slide"
          />
        </Carousel.Item>
        <Carousel.Item interval={2000}>
          <img
            className="d-block mx-auto"
            src="https://i.imgur.com/BuNGcJI.png"
            alt="Second slide"
          />
        </Carousel.Item>
        <Carousel.Item interval={2000}>
          <img
            className="d-block mx-auto"
            src="https://i.imgur.com/UDBoRJn.png"
            alt="Third slide"
          />
        </Carousel.Item>
      </Carousel>
 

я попытался отредактировать файл начальной загрузки и css, но ни один из них не сработал!
любая помощь будет высоко оценена 🙂

Не фиксируйте ширину и высоту подобным образом, особенно для телефонов. Прямо сейчас вы устанавливаете одинаковую высоту для всех устройств. Либо ширина ручки, либо высота. В любом случае, ширина:100% не требуется, она должна автоматически заполнять холст. Если нет, то используйте минимальную ширину:100% и высоту:авто.

Вам также необходимо использовать изображения, которые могут заполнить ваш холст. Попробуйте использовать изображения в соотношении 1:1,618:1.