Question

以下是我尝试使用carousel =＆gt;的代码。这基本上就是网站上给出的例子。

无错误，显示活动滑块但滑动效果似乎不起作用，我不知道如何使其与React一起使用。我做错了吗？它与'href'有关吗？请帮我。这让我疯了......

import React from 'react';

export default class Slider extends React.Component {
    render() {
        return (
            <div id="carouselExampleIndicators" className="carousel slide" data-ride="carousel">
                <ol className="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0" className="active"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                </ol>
                <div className="carousel-inner" role="listbox">
                    <div className="carousel-item active">
                        <img className="d-block img-fluid" src="resources/img/cd-background-img.jpg" alt="First slide"/>
                    </div>
                    <div className="carousel-item">
                        <img className="d-block img-fluid" src="resources/img/home-bg.jpg" alt="Second slide"/>
                    </div>
                    <div className="carousel-item">
                        <img className="d-block img-fluid" src="resources/img/home-bg.jpg" alt="Third slide"/>
                    </div>
                </div>
                <a className="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                    <span className="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span className="sr-only">Previous</span>
                </a>
                <a className="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                    <span className="carousel-control-next-icon" aria-hidden="true"></span>
                    <span className="sr-only">Next</span>
                </a>
            </div>
        );
    }
}

Answer 1

试试https://github.com/leandrowd/react-responsive-carousel。我使用它并且效果很好！

Answer 2

这是另一个选择，这是一个完整的引导程序组件，已迁移到React react-bootstrap。
对于与材料设计集成的完整项目，也位于此处 React - Material Design for Bootstrap

如何使用Bootstrap 4中的旋转木马组件和React.js？

2 个答案: