@brainexplosion

Как создать carusel на React?

Я использую React-Bootstrap для создания Carusel. Вот код:

import React, { Component } from 'react';
import "./index.css";
import { Carousel} from 'react-bootstrap';



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}
       >
        <Carousel.Item>
          <img width={900} height={500} alt="900x500" src={this.state.img} />
          <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={this.state.img} />
          <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={this.state.img} />
          <Carousel.Caption>
            <h3>Third slide label</h3>
            <p>
              Praesent commodo cursus magna, vel scelerisque nisl consectetur.
            </p>
          </Carousel.Caption>
        </Carousel.Item>
      </Carousel>
	  );
	}
  }
  

export default ControlledCarousel;


Вопрос вот в чем: как создать массив картинок и по ключу вывести их, а не прописывать каждую картинку в src?
  • Вопрос задан
  • 1283 просмотра
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Lists and keys

<Carousel
  activeIndex={index}
  direction={direction}
  onSelect={this.handleSelect}
>
  {items.map((item, index) => (
    <Carousel.Item key={index}>
      <img width={900} height={500} alt="900x500" src={item.src} />
      <Carousel.Caption>
        <h3>{item.label}</h3>
        <p>{item.caption}</p>
      </Carousel.Caption>
    </Carousel.Item>
  ))}
</Carousel>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы