How to put all stories into Slider

[skychavda]

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

[neeraj123ved]

You can use swiper slider and add the touchStartPreventDefault: false. It will work fine.

[mohitk05]

Closing this as it has a comment with a possible solution.