Carousel反応起動ストラップでアイコンを変更して属性を設定する方法は？

Question

私はリアブートストラップでカルーセルを使用していますが、このカルーセルで物事を変更する方法を見つけられませんでした。たとえば、グリフコンアイコンを変更して自動再生を停止したいが、成功しない。あなたは属性とアイコンを設定する方法を知っていますか？

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; 

`