Карусель React-Bootstrap не работает - PullRequest
Новая
       26

Карусель React-Bootstrap не работает

0 голосов
/ 15 марта 2019

Я использую платформу React-Bootstrap ( ссылка ) и пытаюсь использовать компонент Карусель .По какой-то причине, это показывает фанки .Он выполняет свою работу и выполняет переход между слайдами, но он определенно не должен выглядеть так, как он, поэтому я что-то упускаю.

В настоящее время я импортирую последнюю версию Bootstrap, и я также попытался импортировать тольковерсия 3, так как я прочитал это на другом решении с похожей проблемой.Попробовал импортировать js-файл response-bootstrap на всякий случай.Попробовал обернуть его в Контейнер и попытался удалить его из на тот случай, если они (по какой-либо причине) конфликтуют друг с другом.Я также попробовал просто использовать простой Bootstrap, и у меня возникла та же проблема.

Я чувствую, что в этот момент мне может понадобиться еще один набор глаз, потому что я, вероятно, упускаю что-то глупое.

import React, {
  Component
} from "react";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Jumbotron from "react-bootstrap/Jumbotron";
import Card from "react-bootstrap/Card";
import Carousel from "react-bootstrap/Carousel";
import {
  FontAwesomeIcon
} from "@fortawesome/react-fontawesome";

class Main extends Component {
  render() {
    return (
      // See HTML section
    );
  }
}

export default Main;
<main>
  <section id="testimonials" className="p-5">
    <Carousel>
      <Carousel.Item>
        <img className="d-block w-100" src="holder.js/800x400?text=First slide&bg=373940" 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="holder.js/800x400?text=Second slide&bg=282c34" alt="Third slide" />

        <Carousel.Caption>
          <h3>Second slide label</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </Carousel.Caption>
      </Carousel.Item>
      <Carousel.Item>
        <img className="d-block w-100" src="holder.js/800x400?text=Third slide&bg=20232a" alt="Third slide" />

        <Carousel.Caption>
          <h3>Third slide label</h3>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur.
          </p>
        </Carousel.Caption>
      </Carousel.Item>
    </Carousel>
  </section>
</main>
...