React boostrap轮播不起作用 [英] React boostrap carousel not working
本文介绍了React boostrap轮播不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用 react-bootstrap 创建一个简单的轮播.这是我正在尝试创建的简单不受控制的轮播.https://react-bootstrap.github.io/components/carousel/
I'm trying to create a simple carousel using react-bootstrap. This is the simple uncontrolled carousel I'm trying to create. https://react-bootstrap.github.io/components/carousel/
这是我的代码,
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
图像垂直堆叠,不会发生过渡.我在这里做错了什么.
The images get vertically stacked and no transition happens. What am I doing wrong here.
推荐答案
我也遇到了完全相同的问题.在 public/index.html
文件中,而不是链接到
I also had the exact same problem. In public/index.html
file, instead of linking to
<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">
它奏效了:)
这篇关于React boostrap轮播不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文