Question

我一直在尝试使用react-bootstrap软件包制作多项目轮播，而我成功地制作了单项轮播。我正在使用Instagram API来获取一些照片，其想法是显示其中的一些，而不仅仅是一张。

我使用了我在React文档中找到的使用受控组件渲染图像的示例。我尝试将handleSelect函数中的selectedIndex设置为默认值3，这是行不通的。据我了解，activeIndex控制着可见的幻灯片，所以……我不知道我缺少什么。这是链接： https://react-bootstrap.github.io/components/carousel/

下面是我的受控轮播组件的一些代码：

import Carousel from 'react-bootstrap/Carousel'

export default class ControlledCarousel extends React.Component {
  constructor(props, context) {
    super(props, context);

    // this.handleSelect = this.handleSelect.bind(this);

    this.state = {
      index: 0,
      direction: null,
    };
  }

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

  render() {
    const { index, direction } = this.state;

    return (
      <Carousel
        activeIndex={index}

        direction={direction}
        onSelect={this.handleSelect}

      >

              {this.props.images.map((image) => {
                return <Carousel.Item key={image.id}>
                  <img className="d-block w-100" alt={image.tags[0]} src={image.images.standard_resolution.url} />
                </Carousel.Item>
              })}

      </Carousel>
    );
  }
}

Answer 1

这与标准自举轮播的功能完全不同，因此并非如此。但是，您可以为此使用不同的npm库！

有没有办法用react-bootstrap做一个多项目轮播？

1 个答案: