0

Пытаюсь создать слайдер изображений в своём реакт-приложении. Установил через npm react-bootstrap.

Прописал необходимый код, но карусель отображается не правильно, как будто в ней стили весь css убрали и остался один html. Прикрепляю скрин: введите сюда описание изображения

Соответственно, когда я добавляю несколько изображений через Carousel.Item, получается вот так: введите сюда описание изображения

Видно, что в самом верху появилось три пункта навигации по слайдеру, однако он всё ещё не работает.

import Carousel from 'react-bootstrap/Carousel';
import oneImg from '../assets/1.png';
import twoImg from '../assets/2.png';
import threeImg from '../assets/3.png';

export default function CarouselBox() {
  return (
    <Carousel>
      <Carousel.Item>
        <img
          className="d-block w-100"
          src= {oneImg}
          alt="First slide"
        />
        <Carousel.Caption>
          <h3>First slide label</h3>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </Carousel.Caption>
      </Carousel.Item>
      
      <Carousel.Item>
        <img
          className="d-block w-100"
          src= {oneImg}
          alt="First slide"
        />
        <Carousel.Caption>
          <h3>First slide label</h3>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </Carousel.Caption>
      </Carousel.Item>
      
      <Carousel.Item>
        <img
          className="d-block w-100"
          src= {oneImg}
          alt="First slide"
        />
        <Carousel.Caption>
          <h3>First slide label</h3>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </Carousel.Caption>
      </Carousel.Item>
    </Carousel>
  );
}
7
  • Вот package.json строки на которых видно что react-bootstrap есть: "dependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "bootstrap": "^5.2.2", "react": "^18.2.0", "react-bootstrap": "^2.6.0", "react-dom": "^18.2.0", "react-router-dom": "^6.4.3", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" } 16 ноя 2022 в 19:25
  • ну так может стили и не подключились, где видно что Вы их используете? что-то типа import 'styles.css' 16 ноя 2022 в 19:38
  • @DaniilLoban, так он разве не прописываются по умолчанию для карусели? Никогда не видел, чтобы их создавали с нуля 16 ноя 2022 в 19:40
  • не создавать с нуля, а подключить те что идут либой, она не может идти без css 16 ноя 2022 в 19:41
  • import 'bootstrap/dist/css/bootstrap.min.css'; вот это кто будет за Вас подключать? 16 ноя 2022 в 19:42

1 ответ 1

0

Ответ: Необходимо дописать ещё одну строчку импорта для подключения стилей

import 'bootstrap/dist/css/bootstrap.min.css';

Спасибо, Daniil Loban

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.