Блог

Я в начале react js, и я новичок здесь, поэтому извините, если я написал проблему неразборчиво, я хотел бы сделать Карусель с помощью JSON.Данные, но я могу отобразить только одну фотографию, я не могу делать скользящие фотографии. Я надеюсь, что кто-нибудь сможет мне помочь.

введите описание изображения здесь

data.json

    {
  "Slajd":[
    {
        "id": 1,
        "name": "title",
        "image": [
           "https://cf.bstatic.com/images/hotel/max1024x768/263/263731269.jpg",
           "https://images.pexels.com/photos/1108099/pexels-photo-1108099.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500"
        ]
   }
  ]
}
 
 

JSX

  import React from 'react';
import { Container, Carousel, CarouselItem, CarouselProps } from 'react-bootstrap';
export function Slider({ data }) {
    return(
             <Carousel>
                 <Carousel.Item interval={1000}>
                 <img
                   className="d-block w-100"
                   src={data.image}
                   />
               </Carousel.Item>
            </Carousel>
        );
}
 

App.js

 function App() {
  return(
      <Container>
       {photo.Slajd.map(data => (
       <Carousel xs={3} key={data.id}>
         {data.image.map(imgSrc => (
        <Slider imgSrc={imgSrc}/>
         ))}
         </Carousel>
       ))}
      </Container>
  );
}
 

Первый совет, попробуйте вставить debugger и посмотреть, что data photo возвращает or JSON. Вы также можете сделать это с console.log помощью.

Во-вторых, как я вижу, вы просматриваете свои слайды, затем просматриваете URL-адреса изображений и передаете этот URL-адрес компоненту слайдера в качестве imgSrc реквизита, но в компоненте слайдера вы пытаетесь получить data реквизит вместо imgSrc .

Попробуйте изменить так:

 import React from 'react';
import { Container, Carousel, CarouselItem, CarouselProps } from 'react-bootstrap';
export function Slider({ imgSrc }) {
    return(
             <Carousel>
                 <Carousel.Item interval={1000}>
                 <img
                   className="d-block w-100"
                   src={imgSrc}
                   />
               </Carousel.Item>
            </Carousel>
        );
}