CODEWITHSUNDEEP
javascriptreactjsreact-reduxcarousel
user944513
user944513

Reputation: 12729

how to show next slide after drag in react?

I am using this package https://www.npmjs.com/package/react-responsive-carousel .In demo http://react-responsive-carousel.js.org/ user able to go to next slide after Dragging .it working fine.but when I used same package I am not able to drag to next slide .

can you please suggest me where I am doing wrong ?

https://codesandbox.io/s/beautiful-carson-otvj0?file=/src/App.js

<Carousel

      autoPlay={true}
      infiniteLoop={true}
      showArrows={false}
      showThumbs={false}
      showStatus={false}
    >
      <div style={{ height: "200px", color: "#fff" }}>this is slide 1</div>
      <div style={{ height: "200px", color: "#fff" }}>this is slide 2</div>
      <div style={{ height: "200px", color: "#fff" }}>this is slide 3</div>
      <div style={{ height: "200px", color: "#fff" }}>this is slide 4</div>
    </Carousel>

Upvotes: 2

Views: 1310

Answers (2)

User7007
User7007

Reputation: 361

The demo you are using doesn't show the full code that is required to achieve what is being shown.

To enable swiping/ dragging, you need to add the following props to the Carousel component.

swipeable={true}
emulateTouch={true}

Below is an example of the code you referenced that will enable the functionality you want.

<Carousel

      autoPlay={true}
      infiniteLoop={true}
      showArrows={false}
      showThumbs={false}
      showStatus={false}
      swipeable={true}
      emulateTouch={true}
    >
      <div style={{ height: "200px", color: "#fff" }}>this is slide 1</div>
      <div style={{ height: "200px", color: "#fff" }}>this is slide 2</div>
      <div style={{ height: "200px", color: "#fff" }}>this is slide 3</div>
      <div style={{ height: "200px", color: "#fff" }}>this is slide 4</div>
    </Carousel>

For more detail on the implementation use this link http://react-responsive-carousel.js.org/storybook/?path=/story/01-basic--base. You can view the demo code by viewing the story tab in the side navbar

Upvotes: 0

Mantas Astra
Mantas Astra

Reputation: 1062

I've tried using it myself and couldn't figure out why the draggable wasn't working.

However, I can offer you alternative Carousel package - siema. It is a great, lightweight carousel that is made with JS. There are also other packages built on top of this purely made for React.

In your case, I would offer to try out react-siema.

With it, you can simply use the carousel like that and it will be draggable by default. Plus, no need to load any css.

import React from "react";
import ReactSiema from "react-siema";

const Slide = (props) => <img src="https://picsum.photos/200" alt="slide" />;

const App = () => (
  <ReactSiema>
    <Slide src="#" />
    <Slide src="#" />
    <Slide src="#" />
  </ReactSiema>
);

export default App;

Link to the codesandbox with this example: click here.

Link to the react-siema: click here.

Link to the original siema: click here.

I've been using siema myself and would recommend it for nice and simple carousels.

Upvotes: 1

Related Questions