在React中构建一个可拖动的滑块

网站滑块是灵活的用户界面元素，可以帮助分享多个图片或有效地传达信息，而不浪费你的主页上的宝贵空间。

在这篇文章中，我们将演示如何使用react-draggable-slider包，在React中建立一个具有可拖动功能的滑块。

什么是滑块？

网站滑块是一种幻灯片，显示一系列的图片或项目，这些图片或项目在一个空间内水平或垂直排列。这些图片在一个规定的时间段内单独显示，在从一个图片或项目到下一个图片或项目的变化之间有一个过渡效果。

用户可以使用一组导航控制来浏览滑块图像，而且图像或项目也可以循环播放。滑块可以帮助网站以一种视觉上吸引人的方式展示单个项目，同时还可以节省屏幕空间。

展示客户评价的网站滑块对于在新的潜在客户中建立信任和信誉是有利的。滑块也可以用来展示不同的服务项目，或者展示一个产品的多张图片，以便潜在的客户可以从不同的角度来观察它。

这种类型的UI元素对于一个长页面的滚动内容来说是一个有吸引力的选择。通过滑块，你可以将信息集中在一个地方，为每个项目之间的循环设置一个舒适的节奏，甚至可以添加一个自动播放功能。

什么是可拖动滑块？

可拖动滑块是手动导航的；用户通过按住并向左或向右拖动当前查看的项目来从一个项目导航到下一个项目。要查看下一个项目，用户按住当前项目并向左拖动。同样地，要查看上一个项目，用户需要按住当前项目并向右拖动。

什么是 react-draggable-slider？

要在React中创建一个可拖动的滑块，我们可以从头开始构建它，或者使用React包。

使用React包可以提高你的工作效率，因为它可以减少你写代码的时间。然而，这确实意味着你的代码库将依赖于（也许容易受到）该包的影响。这就是为什么最好选择一个开源包，它有一个庞大的社区为其做出贡献，发现、报告和修复错误，从而保持代码的安全性。

在这篇文章中，我们将使用 react-draggable-slider 包。这个包很容易使用，并带有一个内置的悬停效果。

React可拖动滑块演示

为了演示在React中构建一个可拖动的滑块，我们将设置一个React应用程序，安装react-draggable-slider包，然后创建滑块并定义滑块设置。

让我们开始吧!

创建React应用程序

使用下面的命令来创建一个React应用程序，并将其命名为react-draggable-slider：

npx create-react-app react-draggable-slider

现在，在你选择的代码编辑器中打开该应用。在这个演示中，我将使用VS Code。

安装 react-draggable-slider 包

在写这篇文章的时候，react-draggable-slider包与React v18不兼容，这是我们在创建React应用时将得到的React版本。

因此，如果我们现在尝试使用命令来安装滑块包。npm i react-draggable-slider，它将不会被安装，我们将在终端得到一个依赖冲突的错误，如下图所示：

作为一个变通方法，我们需要将我们的React应用中的react 包和react-dom 包的版本降级到v16，以便与react-draggable-slider包兼容。

在创建应用程序时没有办法指定所需的React版本，这就是为什么我们需要在降级版本之前创建应用程序。

首先，导航到package.json 文件，将react 包和react-dom 包的版本从v18.1.0改为v16.13.1。

接下来，在终端运行命令：npm install 。这将自动用我们在package.json 文件中指定的新版本替换我们的node_modules 文件夹中的当前版本。

现在我们准备安装滑块包：

npm i react-draggable-slider

在这个时候，我们在终端中不应该看到任何错误。要在浏览器中查看该应用程序，请使用以下任一命令运行React应用程序：

npm start
yarn start

你会发现在浏览器中出现了一个新的错误，即没有找到react-dom/client React模块。这个错误的发生是因为我们使用的是React v16。

为了解决这个错误，我们需要对我们的index.js 文件做一些修改，改变模块的文件路径。

导航到index.js 文件，改变ReactDom import from的文件路径：

import ReactDOM from 'react-dom/client';

到：

import ReactDOM from 'react-dom';

接下来，我们需要调整如何将我们的React应用渲染到DOM上。要做到这一点，改变用于渲染React应用的代码从：

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

到：

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

现在，回去在你的浏览器中查看该应用。你应该看到应用程序的内容，没有任何错误：

好了，我们已经创建了我们的应用程序；现在是时候创建我们的可拖动滑块了。

创建滑块

为了建立滑块，进入App.js 文件，删除当前的jsx 元素（即Header ），因为它不需要。我们将用我们将从react-draggable-slider 中导入的Slider 元素来替换这个元素。我们还将把一个sliderSettings 对象作为道具传入我们稍后创建的Slider 元素中：

import Slider from "react-draggable-slider";

…

<div className="App">
     <Slider sliderSettings={sliderSettings} />
</div>

接下来，我们将创建一个名为projectList 的对象数组。我们将使用这个数组来存储将在滑块的每张幻灯片上显示的项目：

const projectList = [
    {
      title: "Nature's Life",
      image: project1,
      description:
        "Praesent quis congue nisi. Vivamus dapibus suscipit magna at imperdiet. Mauris consectetur pharetra metus eu suscipit. Maecenas augue tortor, consequat vitae lacus id, pharetra tempor mauris. Suspendisse sodales commodo erat, non imperdiet nisl scelerisque at. Nulla porttitor gravida diam, in ornare ipsum accumsan bibendum. Morbi ut ante metus. "
    },
    {
      title: "Into The Waters",
      image: project2,
      description:
        "Duis at tellus vitae velit aliquet varius. Fusce luctus libero et ligula tristique lobortis. Vestibulum eu placerat risus, eu semper augue. Integer at purus sit amet elit pretium viverra. Suspendisse id fringilla nibh, nec dictum urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. "
    },
    {
      title: "Higher Than The Stars",
      image: project3,
      description:
        "Praesent quis congue nisi. Vivamus dapibus suscipit magna at imperdiet. Maecenas augue tortor, consequat vitae lacus id, pharetra tempor mauris. Suspendisse sodales commodo erat, non imperdiet nisl scelerisque at. Nulla porttitor gravida diam, in ornare ipsum accumsan bibendum. Morbi ut ante metus. Proin rhoncus magna lectus, nec consequat augue ultricies eu."
    },
    {
      title: "Miniature Wonders",
      image: project4,
      description:
        "Praesent quis congue nisi. Vivamus dapibus suscipit magna at imperdiet. Mauris consectetur pharetra metus eu suscipit. Maecenas augue tortor, consequat vitae lacus id, pharetra tempor mauris. Suspendisse sodales commodo erat, non imperdiet nisl scelerisque at. Nulla porttitor gravida diam, in ornare ipsum accumsan bibendum. Morbi ut ante metus. "
    },
    {
      title: "Giants Of History",
      image: project5,
      description:
        "Duis at tellus vitae velit aliquet varius. Fusce luctus libero et ligula tristique lobortis. Vestibulum eu placerat risus, eu semper augue. Integer at purus sit amet elit pretium viverra. Suspendisse id fringilla nibh, nec dictum urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. "
    }
  ];

定义滑块的设置

现在，我们将定义我们的滑块设置；这些设置将被传递到我们的滑块中以配置其行为。

我们将首先创建一个名为sliderSettings 的对象，它有以下道具。data,speed,easing,bgColor,showButton,buttonText,buttunHref, 和buttonTarget 。这些道具定义了我们的滑块将如何表现以及如何显示。

数据

data 道具接受一个数组。该数组对象表示滑块中将要显示的项目或幻灯片的细节；在我们的例子中，projectList 。每个对象接受三个键值对。title,image, 和description 。默认情况下，data 道具被设置为一个空数组。[].

速度

speed 道具接受一个整数。它决定了滑块拖动到下一个或上一个项目时的速度（以毫秒为单位）。举例来说，speed 值为3000，等于3秒。默认的speed 道具值是500ms。

缓和

easing 道具接受一个字符串。有四种可用的GSAP假动作用于对滑动进行动画处理：power、back、elastic和expo。尝试每一种，然后选择你最喜欢的一种。如果没有指定值，easing prop值将默认为ease ，这是浏览器的默认值。

bgColor

bgColor 道具接受一个字符串。它设置整个滑块的背景颜色，接受HEX和RGB（A）值。例如，#ffffff 或rgba(255, 255, 255, 0.05) 。bgColor 道具的默认值是rgba(255, 255, 255, 0.05) 。

showButton

showButton 道具接受一个布尔值。如果设置为true ，每个项目或幻灯片都会显示一个按钮；但是，如果showButton 道具设置为false ，则不会显示按钮。默认情况下，showButton 道具值设置为true 。

按钮文本

buttonText 道具接受一个字符串。它表示将在每个项目的按钮中显示的文本。默认情况下，该值被设置为View case study 。

buttonHref

buttonHref 道具接受一个字符串。这个字符串是一个href 属性，它允许滑块中的每个项目链接到另一个页面，使用户能够查看关于该项目的其他细节。默认情况下，buttonHref prop值被设置为#。

按钮目标

buttonTarget 道具接受一个字符串。当用户点击一个按钮时，这个道具指定链接是在当前页面还是在另一个页面打开。该值可以是_self ，也可以是_blank 。默认情况下，buttonTarget 道具值被设置为_blank 。

让我们从只传入data 这个道具开始，看看我们的滑块会是什么样子：

const sliderSettings = {
    data: projectList,
  };

如果我们在浏览器中查看我们的滑块，我们可以看到它有前面描述的默认的react-draggable-slider道具。现在，让我们用我们的首选值来传递其余的道具。由于我们没有为easing 这个道具指定一个值，它将默认为ease ：

const sliderSettings = {
    data: projectList,
    speed: 3000,
    bgColor: "#070707",
    showButton: true,
    buttonText: "View projects",
    buttonHref: "https://www.example.com",
    buttonTarget: "_self"
  };

我们还将在我们的styles.css 文件中为我们的body和anchor标签写一些样式，这也是我们的行动呼吁按钮，然后将该文件导入我们的App.js 文件中。

body {
  font-family: sans-serif;
  text-align: center;
  background-color: #070707;
  color: #fff;
}
a:link,
a:hover,
a:active,
a:visited {
  color: #eee;
  border-top: 1px solid #434141;
  border-bottom: 3px solid #434141;
  border-radius: 20px;
}

在这一点上，我们的App.js 文件应该看起来像这样：

import React from "react";
import Slider from "react-draggable-slider";
import "./styles.css";
import project1 from "./imgs/bibi-pace-Hi4fWKU2KSk-unsplash.jpg";
import project2 from "./imgs/scott-webb-e3dY8laAQtA-unsplash.jpg";
import project3 from "./imgs/alexander-andrews-fsH1KjbdjE8-unsplash.jpg";
import project4 from "./imgs/daan-mooij-RyxShs7mG8E-unsplash.jpg";
import project5 from "./imgs/damien-santos-M5rim8Yh4LY-unsplash.jpg";

export default function App() {
  const projectList = [
    {
      title: "Nature's Life",
      image: project1,
      description:
        "Praesent quis congue nisi. Vivamus dapibus suscipit magna at imperdiet. Mauris consectetur pharetra metus eu suscipit. Maecenas augue tortor, consequat vitae lacus id, pharetra tempor mauris. Suspendisse sodales commodo erat, non imperdiet nisl scelerisque at. Nulla porttitor gravida diam, in ornare ipsum accumsan bibendum. Morbi ut ante metus. "
    },
    {
      title: "Into The Waters",
      image: project2,
      description:
        "Duis at tellus vitae velit aliquet varius. Fusce luctus libero et ligula tristique lobortis. Vestibulum eu placerat risus, eu semper augue. Integer at purus sit amet elit pretium viverra. Suspendisse id fringilla nibh, nec dictum urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. "
    },
    {
      title: "Higher Than The Stars",
      image: project3,
      description:
        "Praesent quis congue nisi. Vivamus dapibus suscipit magna at imperdiet. Maecenas augue tortor, consequat vitae lacus id, pharetra tempor mauris. Suspendisse sodales commodo erat, non imperdiet nisl scelerisque at. Nulla porttitor gravida diam, in ornare ipsum accumsan bibendum. Morbi ut ante metus. Proin rhoncus magna lectus, nec consequat augue ultricies eu."
    },
    {
      title: "Miniature Wonders",
      image: project4,
      description:
        "Praesent quis congue nisi. Vivamus dapibus suscipit magna at imperdiet. Mauris consectetur pharetra metus eu suscipit. Maecenas augue tortor, consequat vitae lacus id, pharetra tempor mauris. Suspendisse sodales commodo erat, non imperdiet nisl scelerisque at. Nulla porttitor gravida diam, in ornare ipsum accumsan bibendum. Morbi ut ante metus. "
    },
    {
      title: "Giants Of History",
      image: project5,
      description:
        "Duis at tellus vitae velit aliquet varius. Fusce luctus libero et ligula tristique lobortis. Vestibulum eu placerat risus, eu semper augue. Integer at purus sit amet elit pretium viverra. Suspendisse id fringilla nibh, nec dictum urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. "
    }
  ];

  const sliderSettings = {
    data: projectList,
    speed: 3000,
    easing: "ease",
    bgColor: "#070707",
    showButton: true,
    buttonText: "View projects",
    buttonHref: "https://www.example.com",
    buttonTarget: "_self"
  };

  return (
    <div className="App">
      <Slider sliderSettings={sliderSettings} />
    </div>
  );
}

这是带有新的CSS样式的滑块。

你会注意到，我们已经改变了文本颜色，以及页面和滑块的背景颜色。我们还为按钮设计了样式并改变了它的文本值。如果我们使用power GSAPeasings 来制作滑动的动画，滑动的动画将看起来像这样。

你可以自己尝试其他的easing 道具选项，选择你最喜欢的一个，也可以尝试其他的道具值。

你还会注意到，当光标移到图片卡上时，图片卡有一个漂亮的悬停效果。这是react-draggable-slider的一个很酷的、内置的功能。

总结

在本教程中，我们展示了使用 react-draggable-slider 包在 React 中创建一个可拖动的滑块是多么容易。我们演示了如何弥补最新版本的React的兼容性问题。我们还展示了如何修改 react-draggable-slider 的默认设置来定制我们的滑块的样式和动画。

请随意查看和玩弄这里的代码。你可能还想看看另一个React滑块工具，Swiper，它也是一个非常酷的软件包。