Question

我在反应引导程序中使用Carousel，但我没有弄清楚如何更改此Carousel中的内容。例如，我想要更改glyphicon图标并停止自动播放，但没有成功。你知道如何设置属性和图标吗？

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

1. Controlled Carousel:

   Actually here you are not controlling the carousel.
To control the carousel you have to send 'direction' and 'index' as props.

 check the link: https://react-bootstrap.github.io/components.html#carousels-controlled

2. Changing Icons

 You can change the navigation icons by your predefined icons by passing 'nextIcon' and 'prevIcon' props.  Check the props list which you can pass it to the component in the mentioned 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中更改图标和设置属性？

1 个答案: