如何在 Carousel react-bootstrap 中更改图标和设置属性？

Question

我在 react-bootstrap 中使用 Carousel，但我不知道如何更改此 Carousel 中的内容。例如，我想更改字形图标并停止自动播放，但没有成功。你知道怎么设置属性和图标吗？

import React, {  Component } from 'react';
import {Carousel} from 'react-bootstrap';


class CarouselMain extends Component {
    constructor(props) {
        super(props);
        this.state = {
            prevIcon: '<Glyphicon glyph="chevron-up" />'
        }
    }

    handleSelect = (selectedIndex, e) => {
        this.setState({
            index: selectedIndex,
            direction: e.direction
        });
    }

    render() {
        return (
            <Carousel autoPlay={false} onSelect={this.handleSelect}>
                <Carousel.Item>
                    <img width={900} height={500} alt='900x500' src='/assets/carousel.png'/>
                    <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 width={900} height={500} alt='900x500' src='/assets/carousel.png'/>
                    <Carousel.Caption>
                        <h3>Second slide label</h3>

                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    </Carousel.Caption>
                </Carousel.Item>
                <Carousel.Item>
                    <img width={900} height={500} alt='900x500' src='/assets/carousel.png'/>
                    <Carousel.Caption>
                        <h3>Third slide label</h3>

                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                    </Carousel.Caption>
                </Carousel.Item>
            </Carousel>
        )
    }
}

export default CarouselMain;

Answer 1

受控轮播：

实际上在这里你并没有控制轮播。要控制轮播，您必须发送 'direction' 和 'index' 作为道具。检查link：https://react-bootstrap.github.io/components.html#carousels-controlled

更改图标

您可以通过传递 'nextIcon' 和 'prevIcon' 道具来根据您预定义的图标更改导航图标。检查可以将其传递给提到的组件的道具列表 link

import React, {  Component } from 'react';
import {Carousel} from 'react-bootstrap';


class CarouselMain extends Component {
    constructor(props) {
        super(props);
        this.state = {
            index: 1,  //index which u want to display first
            direction: null //direction of the carousel..u need to set it to either 'next' or 'prev' based on user click
            nextIcon: <span className="glyphicon glyphicon-glass"></span>,
            prevIcon: <span className="glyphicon glyphicon-glass"></span>
        }
    }

    handleSelect = (selectedIndex, e) => {
        this.setState({
            index: selectedIndex,
            direction: e.direction
        });
    }

    render() {
        const {nextIcon,prevIcon}=this.state;
        return (
            <Carousel nextIcon ={nextIcon} prevIcon={prevIcon}  index={this.state.index} direction={this.state.direction} onSelect={this.handleSelect}>
                <Carousel.Item>
                    <img width={900} height={500} alt='900x500' src='/assets/carousel.png'/>
                    <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 width={900} height={500} alt='900x500' src='/assets/carousel.png'/>
                    <Carousel.Caption>
                        <h3>Second slide label</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    </Carousel.Caption>
                </Carousel.Item>
                <Carousel.Item>
                    <img width={900} height={500} alt='900x500' src='/assets/carousel.png'/>
                    <Carousel.Caption>
                        <h3>Third slide label</h3>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                    </Carousel.Caption>
                </Carousel.Item>
            </Carousel>
        )
    }
}
export default CarouselMain;

如何在 Carousel react-bootstrap 中更改图标和设置属性？

how to change icons and set attributes in Carousel react-bootstrap?

carousel

reactjs

react-bootstrap