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

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

0 голосов
/ 14 мая 2018

Я пытаюсь создать простую карусель, используя реагирующую загрузку. Это простая неконтролируемая карусель, которую я пытаюсь создать. https://react -bootstrap.github.io / компоненты / карусельного /

Это мой код, 

import React from 'react';
import Carousel1 from '../../../assets/FootTheBall_SignUpScreen_CarouselImage-01.png';
import Carousel2 from '../../../assets/FootTheBall_SignUpScreen_CarouselImage-02.png';
import Carousel3 from '../../../assets/FootTheBall_SignUpScreen_CarouselImage-03.png';
import Carousel4 from 
import Carousel from 'react-bootstrap/lib/Carousel';


    const Core = () => (
        <main className="core">
            <article className="left">
                <Carousel>
                    <Carousel.Item>
                        <img src={Carousel1} alt=""/>
                    </Carousel.Item>
                    <Carousel.Item>
                        <img src={Carousel2} alt=""/>
                    </Carousel.Item>
                    <Carousel.Item>
                        <img src={Carousel3} alt=""/>
                    </Carousel.Item>
                </Carousel>

            </article>
            <article className="right"></article>
        </main>

    );
    export default Core

Изображения располагаются вертикально и переход не происходит. Что я тут не так делаю.

Ответы [ 3 ]

0 голосов
/ 17 мая 2019

У меня тоже была точно такая же проблема.В файле public/index.html вместо ссылки на 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

я изменил его на 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

Это сработало:)

0 голосов
/ 03 июня 2019

Это то, что я сделал.Работает нормально.

Добавьте строку ниже в index.js 

import "../../node_modules/bootstrap/dist/css/bootstrap.css"
0 голосов
/ 15 мая 2018

Связали ли вы файлы стилей?

Согласно документам :

Поскольку React-Bootstrap не зависит от очень точной версии BootstrapМы не отправляем с любым включенным CSS.Однако для использования этих компонентов требуется некоторая таблица стилей.Как и какие стили начальной загрузки вы включаете, зависит от вас, но самый простой способ - включить последние стили из CDN.

Для связывания добавьте следующее к index.html: 

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
...