react-insta-stories icon indicating copy to clipboard operation
react-insta-stories copied to clipboard

How to put all stories into Slider

Open skychavda opened this issue 1 year ago • 0 comments

Hello, @mohitk05 I am using your package in my project and it's working perfectly fine when I have to display a single screen as per your demo.

Now I've multiple groups of stories like the Instagram for example each user have their own story.

If you saw on the Instagram web when any story opens then it will be displayed in a slider that has right and left buttons to move the story as well as switch between different users.

So to achieve that functionality I bind your component with react-slick for example like this:

<Slider ref={carouselRef} {...settings}>
    {storiesData.map((sd, index) => (
      <div key={index}>
        <Stories
          key={index}
          stories={sd}
          defaultInterval={2000}
          width={432}
          height={768}
          // onStoryEnd={(e) => console.log('Line----71 index.js', e)}
          // onAllStoriesEnd={(e) => console.log('Line----72  index.js', e)}
        />
      </div>
    ))}
</Slider>

But it is not working. So can you have any idea or method to achieve this type of functionality?

Example

ig-desktop (1)

skychavda avatar Jul 11 '22 11:07 skychavda