как изменить значки и установить атрибуты в React-Bootstrap Carousel?

Я использую Карусель в React-Bootstrap, но я не понял, как что-то изменить в этой Карусели. Например, я хочу изменить значок глификона и остановить автовоспроизведение, но безуспешно. Знаете ли вы, как установить атрибуты и значок?

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;

reactjs carousel react-bootstrap
person Feruza    schedule 07.11.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

  1. Управляемая карусель:

На самом деле здесь вы не управляете каруселью. чтобы управлять каруселью, вы должны отправить «направление» и «индекс» в качестве реквизита. Проверьте ссылку: https://react-bootstrap.github.io/components.html#carousels-controller

  1. Изменение значков

Вы можете изменить значки навигации на свои предопределенные значки, передав реквизиты «nextIcon» и «prevIcon». Проверьте список реквизитов, который вы можете передать компоненту по указанной ссылке.

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;
person Jayabalaji J    schedule 07.11.2017
comment
не могли бы вы показать мне версию кода. Как бы вы написали это? - person Feruza; 07.11.2017
comment
const nextIcon = { ‹span›X‹/span›} // ваша собственная следующая иконка const prevIcon = { ‹span›O‹/span›} // ваша собственная предыдущая иконка — эти два интервала выдают ошибки. Я думаю, не правильный синтаксис - person Feruza; 07.11.2017