Есть ли способ сделать многоэлементную карусель с реакции-бутстрапом? - PullRequest
Новая
       21

Есть ли способ сделать многоэлементную карусель с реакции-бутстрапом?

0 голосов
/ 11 июля 2019

Я пытался создать многоэлементную карусель с пакетом реагировать с начальной загрузкой, и мне удалось создать только карусель из одного предмета. Я использую API Instagram для получения некоторых фотографий, и идея состоит в том, чтобы показать несколько из них, а не только одну.

Я использовал пример, который я нашел в документации React, об использовании управляемого компонента для рендеринга моих изображений. Я попытался установить selectedIndex в функции handleSelect на значение по умолчанию 3, которое не сработало. Насколько я понимаю, activeIndex управляет видимым слайдом, так что ... я не знаю, что мне не хватает. Это ссылка: https://react -bootstrap.github.io / компоненты / карусель /

Ниже приведен код моего контролируемого компонента карусели: 

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