1

Im at the beginning of react js, and im new here so sorry if I wrote the problem illegibly I would like to do Carousel using JSON.Data but only i can display one photo, i can not do sliding photos. I hope someone could help me.

enter image description here

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=compress&cs=tinysrgb&dpr=1&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>
  );
}
LukaszxDunat
  • 21
  • 1

1 Answers1

0

The first tip, try to put debugger and see what data or photo JSON returns. You can do it with console.log as well.

Second, as I see you are looping through your slides, then looping through image URLs and passing that URL to the Slider component as imgSrc prop, but in the Slider component, you are trying to get data prop instead of imgSrc.

Try to change like this:

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>
        );
}
Baivaras
  • 438
  • 5
  • 17
  • Thank you for quick respond. I did as you suggested. It is working but photos are showed one by one. This is still not a slider. Any ideas how to fix this? – LukaszxDunat Dec 02 '20 at 18:40
  • @LukaszxDunat You are declaring ```Carousel``` Component both in ```Slider``` and ```App``` components. Remove ```Carousel``` component from Slider, leave just a ```Carousel.Item```. You can wrap it in ```<> >```. See this example https://react-bootstrap.github.io/components/carousel/ – Baivaras Dec 03 '20 at 13:15
  • I deleted Carousel component from Slider, but right now nothing is displayed. Do i have to set active class item? – LukaszxDunat Dec 05 '20 at 23:59