用React，Nuka Carousel和Tailwind CSS建造推荐旋转木马
#javascript #react #tailwindcss #testimonials

Image description
推荐是建筑信任和任何产品或服务的信誉的关键方面。在本教程中，我们将介绍使用React，Nuka Carousel库和Tailwind CSS创建动态推荐旋转木马的过程。此旋转木马将显示多个推荐，使用户可以以视觉上吸引人的交互式方式查看不同的反馈条目。

介绍

在开始之前，让我们简要介绍我们将使用的技术：

React：一个流行的JavaScript库，用于构建用户界面，使我们能够创建可重复使用的UI组件。
NUKA旋转木马：一个适用于React的灵活且可自定义的旋转木制库，可提供各种过渡效果和自动播放选项。
Tailwind CSS：一种公用事业第一CSS框架，为快速UI开发提供了广泛的预定义样式和类。
入门
要开始构建我们的推荐旋转木马，请执行以下步骤：

设置React项目：使用您的首选工具（例如，创建React App）设置一个新的React项目并导航到项目目录。
安装依赖项：通过在项目目录中运行以下命令来安装所需的库：

npm install nuka-carousel react react-dom tailwindcss

项目结构：在名为组件的新文件夹中创建必要的组件文件。您的项目结构应该看起来像：

  • SRC
    • 组件
    • tessimonials.jsx
    • FeffbackCard.jsx
    • app.jsx
    • index.css
    • index.js` 现在已经设置了我们的项目，让我们深入研究每个组件的代码。

反馈组件

我们将首先创建反馈组件，该组件代表轮播中的单个反馈条目。


// src/components/FeedbackCard.jsx

const FeedbackCard = ({ content, name, title, img }) => (
  <div className="flex justify-between  flex-col  px-10 py-12 rounded-[20px]  max-w-[370px]  mx-auto my-0 feedback-card">
    <img
      src={"https://i.imgur.com/rx3eOUo.png"}
      alt="double_quotes"
      className="w-[42.6px] h-[27.6px] object-contain"
    />
    <p className="font-poppins font-normal text-[18px] leading-[32.4px] text-white my-10">
      {content}
    </p>

    <div className="flex flex-row">
      <img src={img} alt={name} className=" rounded-full" />
      <div className="flex flex-col ml-4">
        <h4 className="font-poppins font-semibold text-[20px] leading-[32px] text-white">
          {name}
        </h4>
        <p className="font-poppins font-normal text-[16px] leading-[24px] text-dimWhite">
          {title}
        </p>
      </div>
    </div>
  </div>
);

export default FeedbackCard;

在此组件中，我们定义了一个卡片布局，以显示反馈内容，人的姓名及其标题。 IMG支柱代表了该人的个人资料图片的URL。我们使用Tailwind CSS课程来设计该卡，包括其尺寸，颜色和间距。

推荐组件

现在，让我们创建推荐组件，该组件充当证明旋转木马的容器。


// src/components/Testimonials.jsx

import FeedbackCard from "./FeedbackCard";
import Carousel from "nuka-carousel";

const feedback = [
  {
    id: "feedback-1",
    content:
      "Money is only a tool. It will take you wherever you wish, but it will not replace you as the driver.",
    name: "Herman Jensen",
    title: "Founder & Leader",
    img: "https://i.imgur.com/Dn0qoCG.png",
  },
  {
    id: "feedback-2",
    content:
      "Money makes your life easier. If you're lucky to have it, you're lucky.",
    name: "Steve Mark",
    title: "Founder & Leader",
    img: "https://i.imgur.com/fk8eEvW.png",
  },
  {
    id: "feedback-3",
    content:
      "It is usually people in the money business, finance, and international trade that are really rich.",
    name: "Kenn Gallagher",
    title: "Founder & Leader",
    img: "https://i.imgur.com/dLxxRDy.png",
  },
];

const Testimonials = () => (
  <section
    id="clients"
    className={`sm:py-16 py-6 flex justify-center items-center flex-col relative `}
  >
    <div className="absolute z-[0] w-[60%] h-[60%] -right-[50%] rounded-full blue__gradient bottom-40" />

    <div className="w-full flex justify-between items-center md:flex-row flex-col sm:mb-16 mb-6 relative z-[1]">
      <h2
        className={`font-poppins font-semibold xs:text-[48px] text-[40px] text-white xs:leading-[76.8px] leading-[66.8px] w-full`}
      >
        What People are <br className="sm:block hidden" /> saying about us
      </h2>
      <div className="w-full md:mt-0 mt-6">
        <p
          className={`font-poppins font-normal text-dimWhite text-[18px] leading-[30.8px] text-left max-w-[450px]`}
        >
          Everything you need to accept card payments and grow your business
          anywhere on the planet.
        </p>
      </div>
    </div>
    <Carousel autoplay autoplayInterval={3000} wrapAround={true}>
      {feedback.map((card) => (
        <FeedbackCard key={card.id} {...card} />
      ))}
    </Carousel>
  </section>
);

export default Testimonials;

在推荐组件中，我们从NUKA旋转木制库中导入反馈组件和轮播。我们定义反馈数组以保存各种反馈条目的数据。

在推荐组件中，我们设置了旋转木马的容器，并使用尾风CSS类来样式的背景和间距。

tailwind CSS的样式
现在，让我们使用Tailwind CSS为项目添加样式。我们将用于此目的使用index.css文件。


/* src/index.css */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --black-gradient: linear-gradient(
    144.39deg,
    #ffffff -278.56%,
    #6d6d6d -78.47%,
    #11101d 91.61%
  );
  --card-shadow: 0px 20px 100px -10px rgba(66, 71, 91, 0.1);
}

* {
  scroll-behavior: smooth;
}

.feature-card:hover {
  background: var(--black-gradient);
  box-shadow: var(--card-shadow);
}

.feedback-card {
  background: transparent;
}

.feedback-card:hover {
  background: var(--black-gradient);
}

.bg-blue-gradient {
  background: linear-gradient(
    157.81deg,
    #def9fa -43.27%,
    #bef3f5 -21.24%,
    #9dedf0 12.19%,
    #7de7eb 29.82%,
    #5ce1e6 51.94%,
    #33bbcf 90.29%
  );
}

.slider-container {
  @apply w-full;
}

在index.css文件中，我们导入Google字体POPPINS，并将其应用为整个应用程序的默认字体。我们还自定义了容器类以为内容设置最大宽度。

此外，我们使用Tailwind CSS的BG-Gradient-to-r类定义了可重复使用的梯度背景类，从而使我们可以通过设置适当的颜色停止来将梯度背景应用于任何元素。

将所有内容放在app.js
中 现在，让我们将所有组件放在主app.js文件中。


// src/App.js

import { Testimonials } from "./components";

const App = () => (
  <div className="bg-primary w-full overflow-hidden">
    <div className={`container mx-auto`}>
      <div className={`xl:max-w-[1280px] w-full`}>
        <Testimonials />
      </div>
    </div>
  </div>
);

export default App;

在app.js文件中，我们导入了seximonials组件和index.css文件。然后，我们在具有浅灰色背景的容器中渲染推荐组件。

结论

恭喜！您已经成功地使用了React，Nuka Carousel和Tailwind CSS构建了Crusels旋转木马。您的旋转木马现在以交互式和视觉上吸引人的方式展示多个反馈条目，为您的用户提供了宝贵的社会证明。

随意自定义颜色，样式和过渡以匹配项目的设计。通过这种强大的技术组合，您可以创建动态和引人入胜的旋转木马，以在您的网站上显示各种类型的内容。愉快的编码！