Playground

Result

Change the code below and it will reflect in real time

Live Editor

function ImagesStories() { const stories = [ { type: 'image', url: 'https://images.pexels.com/photos/9470805/pexels-photo-9470805.jpeg?w=300', duration: 5000, }, { type: 'image', duration: 6000, url: 'https://images.pexels.com/photos/9733197/pexels-photo-9733197.jpeg?w=300', }, { duration: 7000, type: 'image', url: 'https://images.pexels.com/photos/10964888/pexels-photo-10964888.jpeg?w=300', }, ]; return ( <div style={{ display: 'flex', justifyContent: 'center', flexDirection:"column", alignItems: "center", alignContent: "center", width: '100%', marginBottom: '16px', }} > <Stories width="400px" height="600px" stories={stories} /> <h3 style={{marginTop:'16px'}}>Change the code below and it will reflect in real time</h3> </div> ); }

function ImagesStories() {
  const stories = [
    {
      type: 'image',
      url: 'https://images.pexels.com/photos/9470805/pexels-photo-9470805.jpeg?w=300',
      duration: 5000,
    },
    {
      type: 'image',
      duration: 6000,
      url: 'https://images.pexels.com/photos/9733197/pexels-photo-9733197.jpeg?w=300',
    },
    {
      duration: 7000,
      type: 'image',
      url: 'https://images.pexels.com/photos/10964888/pexels-photo-10964888.jpeg?w=300',
    },
  ];

  return (
    <div
      style={{
        display: 'flex',
        justifyContent: 'center',
        flexDirection:"column",
        alignItems: "center",
        alignContent: "center",
        width: '100%',
        marginBottom: '16px',
      }}
    >
      <Stories width="400px" height="600px" stories={stories} />
      <h3 style={{marginTop:'16px'}}>Change the code below and it will reflect in real time</h3>
    </div>
  );
}