拖入反应后如何显示下一张幻灯片？答案

【问题标题】：how to show next slide after drag in react?拖入反应后如何显示下一张幻灯片？
【发布时间】：2020-12-17 11:00:41
【问题描述】：

我正在使用这个包https://www.npmjs.com/package/react-responsive-carousel。在演示中 http://react-responsive-carousel.js.org/ 用户可以在Dragging 之后转到next 幻灯片。它工作正常。但是当我使用相同的包时，我无法拖动到下一张幻灯片。

你能建议我哪里做错了吗？

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>

【问题讨论】：

标签： javascript reactjs react-redux carousel

【解决方案1】：

我自己尝试过使用它，但无法弄清楚为什么可拖动对象不起作用。

但是，我可以为您提供替代的 Carousel 包 - siema。这是一个用 JS 制作的伟大的、轻量级的轮播。在此基础上还构建了其他纯粹为 React 制作的包。

在你的情况下，我愿意尝试react-siema。

有了它，你可以像这样简单地使用轮播，默认情况下它是可拖动的。另外，无需加载任何 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;

通过此示例链接到代码框：click here。

链接到react-siema：click here。

链接到原来的siema：click here。

我自己一直在使用siema，我会推荐它用于漂亮而简单的轮播。

【讨论】：

【解决方案2】：

您使用的演示没有显示实现所显示内容所需的完整代码。

要启用滑动/拖动，您需要在 Carousel 组件中添加以下道具。

swipeable={true}
emulateTouch={true}

以下是您引用的代码示例，它将启用您想要的功能。

<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>

有关实施的更多详细信息，请使用此链接http://react-responsive-carousel.js.org/storybook/?path=/story/01-basic--base。您可以通过查看侧面导航栏中的故事选项卡来查看演示代码

【讨论】：