如何更改ton-bootstrap動畫輪播動畫tondein？

Question

我想將旋轉木馬動畫更改爲淡入/淡出或其他動畫。但我無法在文檔中找到某些內容。

有人可以幫助或建議另一個Carousel庫reactjs，除了反應光滑。

class Banner extends React.Component { 
 
    constructor(props){ 
 
    super(props); 
 
    this.state = { 
 
     index: 0, 
 
     direction: null, 
 
    } 
 
    } 
 

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

 
    render() { 
 
    return (
 
     <div> 
 
     <Carousel activeIndex={this.state.index} direction={this.state.direction} onSelect={(i, e) =>this.handleSelect(i, e)}> 
 
      <Carousel.Item> 
 
      <img width={900} height={500} alt="900x500" src={images[0]}/> 
 
      <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={images[0]}/> 
 
      <Carousel.Caption> 
 
       <h3>Third slide label</h3> 
 
       <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p> 
 
      </Carousel.Caption> 
 
      </Carousel.Item> 
 
     </Carousel> 
 
     </div> 
 
    ); 
 
    } 
 
}

Answer 1

嘗試添加fade類：

<Carousel className="fade" activeIndex={this.state.index} direction={this.state.direction} onSelect={(i, e) =>this.handleSelect(i, e)}>