Как изменить анимацию карусели реакции-бутстрапа на постепенное исчезновение?

Я хочу изменить анимацию карусели на постепенное появление/исчезновение или другую анимацию. Но я не смог найти что-то в документах.

Может ли кто-нибудь помочь или предложить другую библиотеку Carousel для reactjs, кроме react-slick.

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>
    );
  }
}


reactjs carousel react-bootstrap
person Galti    schedule 24.04.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Просто добавьте fade={true} в компонент Carousel. Или, если вы хотите, чтобы он скользил, добавьте slide={true}. Вот и все!

<Carousel style={{ position: 'relative' }} fade={true}>
    `Carousel Items code...`
<Carousel/>
person Chirag Jain    schedule 27.09.2020

arrow_upward
-1
arrow_downward

Попробуйте добавить класс fade:

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