'How to map one image at a time with Alice carousel?

I am trying to add a carousel for my products. I have an array of url images in product.images that i want to show individually in the carousel but when i map them like this:

<AliceCarousel autoPlay autoPlayInterval="1500"> 
  {[product.images].map((x) => (         
    <img src={x} alt={x} className="medium" />
   ))}
</AliceCarousel>

they do not show individually but all at once like so:

enter image description here

How would you map so as to get each url in the array individually to be shown within the carousel? Thanks

arraysreactjsmappingcarousel


Solution 1:[1]

Probably OP resolved this by now, but if you have the responsive object then you can specify when to show how many elements you would like.

const responsive = {
    2000: {
      items: 10,
    },
    1200: {
      items: 5,
    },
    800: {
      items: 3,
    },
    0: {
      items: 1,
    },
  };
<AliceCarousel responsive={responsive} autoPlay autoPlayInterval="1500"> 
  {[product.images].map((x) => (         
    <img src={x} alt={x} className="medium" />
   ))}
</AliceCarousel>

In this scenario there would be 1 item from 0px width screen to 799px

Source: https://github.com/maxmarinich/react-alice-carousel

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Stefan Georgiev

Related Questions