使用 React 的响应式轮播

Oluwafisayo Oluwatayo 2023年1月30日 2022年5月31日
  1. 使用 React Slick 的响应式轮播
  2. 使用 React Hooks 的响应式轮播
  3. 使用 React Material-UI 的响应式轮播
  4. 结论
使用 React 的响应式轮播

React carousel 是一种效果,它允许我们以幻灯片的形式显示项目。这样,我们可以轻松地显示多个项目,而无需上下滚动页面,因为我们希望看到的项目一个接一个地展开。

这个很棒的设计非常适合电子商务网站。这是一次展示产品的好方法。

此外,对于打算创建投资组合的人来说,轮播效果非常好,可以让网站访问者轻松查看所提供的服务。

在 React 中,我们可以通过不同的方式利用这种滑动效果。我们可以使用带有箭头按钮的轮播,因此用户可以手动单击前进或后退来查看项目。

我们可以让它自动,项目从头到尾自动显示,然后重新开始,就像一个循环。

所以接下来,让我们看看在 React 框架中调用这个函数的不同方法。

使用 React Slick 的响应式轮播

这个例子利用了 react-slick 依赖来工作。创建一个新的项目文件夹后,我们进入终端内的项目文件夹并安装库。我们将使用 npm install react-slick --save 进行安装。

我们还需要安装 React slick-carousel;这将允许我们配置轮播的 CSS 和字体。我们将使用 npm install slick-carousel 安装此依赖项。

然后我们将创建两个文件夹:一个用于轮播,另一个用于 CSS 方面。我们将创建 Components 文件夹;在其中,我们将创建 Slider.js

然后我们创建另一个文件夹;我们称之为 css。我们将在其中创建 App.scss 文件。

然后,我们进入 Slider.js 文件并输入以下代码:

代码片段(Slider.js):

import React from 'react';
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";


function ImageSlider() {
    let settings = {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 3,
        slidesToScroll: 1,
        cssEase: "linear"
    }
    return (
        <Slider {...settings}>
            <div className="card-wrapper">
                <div className="card">
                    <div className="card-image">
                        <img src="images/1.jpg" />
                    </div>
                    <ul className="social-icons">
                        <li><a href="#"><i className="fa fa-facebook"></i></a></li>
                        <li><a href="#"><i className="fa fa-instagram"></i></a></li>
                        <li><a href="#"><i className="fa fa-twitter"></i></a></li>
                        <li><a href="#"><i className="fa fa-dribbble"></i></a></li>
                    </ul>
                    <div className="details">
                        <h2>BMW <span className="job-title">M5</span></h2>
                    </div>
                </div>
            </div>
            <div className="card-wrapper">
                <div className="card">
                    <div className="card-image">
                        <img src="images/2.png" />
                    </div>
                    <ul className="social-icons">
                        <li><a href="#"><i className="fa fa-facebook"></i></a></li>
                        <li><a href="#"><i className="fa fa-instagram"></i></a></li>
                        <li><a href="#"><i className="fa fa-twitter"></i></a></li>
                        <li><a href="#"><i className="fa fa-dribbble"></i></a></li>
                    </ul>
                    <div className="details">
                        <h2>Graphic <span className="job-title">Design</span></h2>
                    </div>
                </div>
            </div>
            <div className="card-wrapper">
                <div className="card">
                    <div className="card-image">
                        <img src="images/3.png" />
                    </div>
                    <ul className="social-icons">
                        <li><a href="#"><i className="fa fa-facebook"></i></a></li>
                        <li><a href="#"><i className="fa fa-instagram"></i></a></li>
                        <li><a href="#"><i className="fa fa-twitter"></i></a></li>
                        <li><a href="#"><i className="fa fa-dribbble"></i></a></li>
                    </ul>
                    <div className="details">
                        <h2>Embrace<span className="job-title">Your Darkness</span></h2>
                    </div>
                </div>
            </div>
            <div className="card-wrapper">
                <div className="card">
                    <div className="card-image">
                        <img src="images/4.jpg" />
                    </div>
                    <ul className="social-icons">
                        <li><a href="#"><i className="fa fa-facebook"></i></a></li>
                        <li><a href="#"><i className="fa fa-instagram"></i></a></li>
                        <li><a href="#"><i className="fa fa-twitter"></i></a></li>
                        <li><a href="#"><i className="fa fa-dribbble"></i></a></li>
                    </ul>
                    <div className="details">
                        <h2>ML <span className="job-title">Fashion</span></h2>
                    </div>
                </div>
            </div>
        </Slider>
    )
}

export default ImageSlider

我们创建包含我们想要使用的项目的数据和图片的组件,然后我们将所有这些包装在 <Slider></Slider> 标记中。这是我们之前安装的轮播库。

接下来,我们进入 App.js 文件夹来编写这些代码:

代码片段(App.js):

import ImageSlider from "./Components/Slider";
import "./css/App.css"
function App() {
  return (
    <div className="container mt-5 carousel">
      <h1 className="slider_title">React Image Carousel</h1>
      <ImageSlider />
    </div>
  );
}

export default App;

因为轮播是一种网页效果设计,所以 CSS 方面是设置中非常重要的部分。我们会做大量的 CSS 来控制每张图片如何移动以及传输需要多长时间。

代码片段(App.scss):

* {
    margin: 0;
    padding: 0;
  }

  body {
    display: block;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    font-family: "Raleway", sans-serif;
    position: relative;
    background: #333;
  }

  .slider_title {
    font-size: 5vw;
    color: tomato;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 2vw;
  }

  .card-wrapper {
    position: relative;
    width: 100%;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }

  .card-wrapper:active, .card-wrapper:hover, .card-wrapper:focus {
    outline: none;
    border: none;
  }

  .card {
    width: 100%;
    height: 450px;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
  }

  .card .card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: #000;
    -webkit-transition: .5s;
    transition: .5s;
  }

  .card .card-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }

  .card:hover img {
    opacity: .4;
    -webkit-transition: .5s;
    transition: .5s;
  }

  .card:hover .card-image {
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
    -webkit-transition: all .9s;
    transition: all .9s;
  }

  .social-icons {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    z-index: 3;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .social-icons li {
    list-style: none;
  }

  .social-icons li a {
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #fff;
    font-size: 23px;
    color: #333;
    font-weight: bold;
    margin: 0 6px;
    -webkit-transition: .4s;
    transition: .4s;
    -webkit-transform: translateY(200px);
            transform: translateY(200px);
    opacity: 0;
  }

  .card:hover .social-icons li a {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 1;
  }

  .social-icons li a:hover {
    background: #000;
    -webkit-transition: .2s;
    transition: .2s;
  }

  .social-icons li a:hover .fa {
    color: #fff;
  }

  .social-icons li a .fa {
    -webkit-transition: .8s;
    transition: .8s;
  }

  .social-icons li a .fa:hover {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
    color: #fff;
  }

  .card:hover li:nth-child(1) a {
    -webkit-transition-delay: .1s;
            transition-delay: .1s;
  }

  .card:hover li:nth-child(2) a {
    -webkit-transition-delay: .2s;
            transition-delay: .2s;
  }

  .card:hover li:nth-child(3) a {
    -webkit-transition-delay: .3s;
            transition-delay: .3s;
  }

  .card:hover li:nth-child(4) a {
    -webkit-transition-delay: .4s;
            transition-delay: .4s;
  }

  .details {
    position: absolute;
    bottom: 400px;
    left: 0;
    background: #fff;
    width: 100%;
    height: 120px;
    z-index: 1;
    padding: 10px;
    -webkit-transition: .6s;
    transition: .6s;
  }

  .details h2 {
    margin: 30px 0;
    padding: 0;
    text-align: center;
  }

  .details h2 .job-title {
    font-size: 16px;
    line-height: 2;
    color: #333;
    font-weight: 300;
    display: block;
  }

  .card:hover .details {
    bottom: 0;
  }

  .carousel .slick-dots {
    bottom: -2.5vw;
  }

  .carousel .slick-dots li button {
    width: 20px;
    height: 20px;
    border: 1px solid #fff;
    border-radius: 20px;
  }

  .carousel .slick-dots li button:before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    content: "";
    text-align: center;
    opacity: .5;
    color: #000;
    background-color: #fff;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
  }

  .carousel .slick-dots li.slick-active button, .carousel .slick-dots li:hover button {
    border-color: tomato;
  }

  .carousel .slick-dots li.slick-active button:before, .carousel .slick-dots li:hover button:before {
    background-color: tomato;
    opacity: 1;
  }

  .carousel .slick-prev, .carousel .slick-next {
    width: 50px;
    height: 50px;
    background-color: #fff;
  }

  .carousel .slick-prev:hover, .carousel .slick-prev:focus, .carousel .slick-next:hover, .carousel .slick-next:focus {
    color: #fff;
    outline:
   none;
    background: #fff;
  }

  .carousel .slick-prev:before, .carousel .slick-next:before {
    color: #000;
    font-family: "Raleway", sans-serif;
  }

  .carousel .slick-next {
    right: -55px;
  }

  .carousel .slick-prev {
    left: -55px;
  }

我们还在 CSS 中设置图片大小。我们还设置了如何显示添加到图片和字体的信息。

输出:

使用 React Slick 的响应式轮播

使用 React Hooks 的响应式轮播

在这个例子中,我们将使用 React 的 useState 钩子,因为它有助于在值之间切换,这发生在轮播效果中。

创建一个新的 react 项目后,我们需要使用 npm install react-icons 安装 react-icons 库。此依赖项将为我们提供左右箭头图标,我们将使用它们在图像之间滑动。

然后我们导航到项目文件夹中的 src 文件夹并创建一个名为 components 的新文件夹。我们将在其中创建两个文件,即:SliderData.jsImageSlider

我们继续编码方面,首先是 ImageSlider.js

代码片段(ImageSlider.js):

import React, { useState } from 'react';
import { SliderData } from './SliderData';
import { FaArrowAltCircleRight, FaArrowAltCircleLeft } from 'react-icons/fa';

const ImageSlider = ({ slides }) => {
  const [current, setCurrent] = useState(0);
  const length = slides.length;

  const nextSlide = () => {
    setCurrent(current === length - 1 ? 0 : current + 1);
  };

  const prevSlide = () => {
    setCurrent(current === 0 ? length - 1 : current - 1);
  };

  if (!Array.isArray(slides) || slides.length <= 0) {
    return null;
  }

  return (
    <section className='slider'>
      <FaArrowAltCircleLeft className='left-arrow' onClick={prevSlide} />
      <FaArrowAltCircleRight className='right-arrow' onClick={nextSlide} />
      {SliderData.map((slide, index) => {
        return (
          <div
            className={index === current ? 'slide active' : 'slide'}
            key={index}>
            {index === current && (
              <img src={slide.image} alt='travel image' className='image' />
            )}
          </div>
        );
      })}
    </section>
  );
};

export default ImageSlider;

应用 useState 函数,我们将 nextSlide 设置为增加,即移动到下一个项目,而 prevSlide 则完全相反。然后我们调用 onClick 事件侦听器以在单击相应箭头时激活这些函数。

继续前进,我们继续前进到 SliderData.js。这是我们制作一系列图像的地方,这些图像要使用轮播效果显示。

代码片段(SliderData.js):

export const SliderData = [
    {
        image:
            'https://images.unsplash.com/photo-1546768292-fb12f6c92568?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'
    },
    {
        image:
            'https://images.unsplash.com/photo-1501446529957-6226bd447c46?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1489&q=80'
    },
    {
        image:
            'https://images.unsplash.com/photo-1483729558449-99ef09a8c325?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80'
    },
    {
        image:
            'https://images.unsplash.com/photo-1475189778702-5ec9941484ae?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1351&q=80'
    },
    {
        image:
            'https://images.unsplash.com/photo-1503177119275-0aa32b3a9368?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80'
    }
];

然后我们进入 App.js 并添加一点代码:

代码片段(App.js):

import './App.css';
import ImageSlider from './components/ImageSlider';
import { SliderData } from './components/SliderData';

function App() {
  return <ImageSlider slides={SliderData} />;
}

export default App;

前面提到的 CSS 在确保轮播效果按预期工作方面起着至关重要的作用,因此我们进入 App.css 文件并进行一些调整:

代码片段(App.css):

.slider {
  position: relative;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image {
  width: 1000px;
  height: 600px;
  border-radius: 10px;
}

.right-arrow {
  position: absolute;
  top: 50%;
  right: 32px;
  font-size: 3rem;
  color: #000;
  z-index: 10;
  cursor: pointer;
  user-select: none;
}

.left-arrow {
  position: absolute;
  top: 50%;
  left: 32px;
  font-size: 3rem;
  color: #000;
  z-index: 10;
  cursor: pointer;
  user-select: none;
}

.slide {
  opacity: 0;
  transition-duration: 1s ease;
}

.slide.active {
  opacity: 1;
  transition-duration: 1s;
  transform: scale(1.08);
}

当我们按照说明放置所有这些代码时,轮播效果应该会很好地发挥作用。

输出:

使用 React Hooks 的响应式轮播

使用 React Material-UI 的响应式轮播

React Material-UI 是一个特性库,我们将部署它来设置 React 轮播的导航箭头,然后我们将使用 React 状态钩子来完成这项工作。

创建一个新项目后,我们使用 npm install @material-ui/corenpm install @material-ui/icons 安装 material-UI。

现在我们进入 src 并创建 3 个文件夹,ComponentsHelpersImages。我们将在 Components 文件夹中创建 Carousel.jsCarousel.css

我们将在 Helpers 文件夹中创建 CarouselData.js 并将图像放入 Images 文件夹中。我们从 Carousel.js 文件夹开始并输入以下代码:

代码片段(Carousel.js):

import React, { useState } from "react";
import "./Carousel.css";
import { images } from "../Helpers/CarouselData";
import ArrowBackIosIcon from "@material-ui/icons/ArrowBackIos";
import ArrowForwardIosIcon from "@material-ui/icons/ArrowForwardIos";

function Carousel() {
  const [currImg, setCurrImg] = useState(0);

  return (
    <div className="carousel">
      <div
        className="carouselInner"
        style={{ backgroundImage: `url(${images[currImg].img})` }}
      >
        <div
          className="left"
          onClick={() => {
            currImg > 0 && setCurrImg(currImg - 1);
          }}
        >
          <ArrowBackIosIcon style={{ fontSize: 30 }} />
        </div>
        <div className="center">
          <h1>{images[currImg].title}</h1>
          <p>{images[currImg].subtitle}</p>
        </div>
        <div
          className="right"
          onClick={() => {
            currImg < images.length - 1 && setCurrImg(currImg + 1);
          }}
        >
          <ArrowForwardIosIcon style={{ fontSize: 30 }} />
        </div>
      </div>
    </div>
  );
}

export default Carousel;

这是我们使用 useState 设置所有导航操作的地方,以定义当我们单击任一箭头时会发生什么,这会触发 onClick 事件侦听器。

然后我们使用 Carousel.css 设置相应的 CSS:

代码片段(Carousel.css):

.carousel {
    width: 60%;
    height: 700px;
    background-color: black;
}

.carouselInner {
    height: 100%;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
}

.carouselInner .left {
    flex: 5%;
    height: 100%;
    background-color: rgb(0, 0, 0, 0.6);
    display: grid;
    place-items: center;
    color: white;
    cursor: pointer;
}

.carouselInner .center {
    flex: 80%;
    height: 100%;
    display: grid;
    place-items: center;
    font-family: Arial, Helvetica, sans-serif;
    text-align: justify;
    text-align-last: center;
}

h1 {
    font-size: 5rem;
}

p {
    font-size: 2rem;
}

h1, p {
    background-color: rgb(255, 255, 255, 0.8);
    padding: 20px;
    border-radius: 9px;
}

.carouselInner .right {
    flex: 5%;
    height: 100%;
    background-color: rgb(0, 0, 0, 0.6);
    display: grid;
    place-items: center;
    color: white;
    cursor: pointer;
}

Helpers 文件夹中,我们有 CarouselData.js 文件。顾名思义,该文件包含我们要在网页上显示的图像和其他信息。

代码片段(CarouselData.js):

import City from "../Images/city.jpg";
import Salvador from "../Images/salvador.jpg";
import Ubc from "../Images/ubc.jpg";

export const images = [
  { title: "San Diego",
  subtitle: "This is San Diego",
  img: City,
  },
  {
    title: "Salvador, Brazil",
    subtitle: "The Best City in the World",
    img: Salvador,
  },
  {
    title: "UBC (Vancouver)",
    subtitle: "The University of British Columbia",
    img: Ubc,
  },
];

最后,我们在 App.js 中进行一些编码。该文件确保我们的项目渲染良好。

代码片段(App.js):

import "./App.css";
import Carousel from "./Components/Carousel";
import React from "react";
function App() {
  return (
    <div className="App">
      <Carousel />
    </div>
  );
}

export default App;

输出:

使用 React Material-UI 的响应式轮播

结论

轮播效果可以美化网页,无论其用途如何。React 框架提供了一个非常灵活的平台,可以探索多种方法来让幻灯片效果在我们的 Web 应用程序上运行并运行。

Oluwafisayo Oluwatayo avatar Oluwafisayo Oluwatayo avatar

Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.

LinkedIn

相关文章 - React Material UI