React:如何从头开始创建图像轮播

本实用教程将引导您完成在 React 中实现图像轮播(滑块)的步骤。我们将在没有任何第三方 NPM 包的情况下从头开始。

先决条件:React 和 CSS 的一些基本知识。

概述

图像轮播是一种幻灯片,用于循环浏览一系列图像(可能带有一些文本)。优点是无论有多少图像,它都可以节省空间。一次只显示一张图像。要查看另一个,用户可以使用一对下一个/上一个按钮或类似的东西。

在接下来的示例中,我们将渲染这个照片数组:

const photos = [
  {
    id: 'p1',
    title: 'Photo One',
    url: 'https://www.kindacode.com/wp-content/uploads/2022/08/1.png',
  },
  {
    id: 'p2',
    title: 'Photo Two',
    url: 'https://www.kindacode.com/wp-content/uploads/2022/08/2.png',
  },
  {
    id: 'p3',
    title: 'Photo Three',
    url: 'https://www.kindacode.com/wp-content/uploads/2022/08/3.jpg',
  },
  {
    id: 'p4',
    title: 'Photo Four',
    url: 'https://www.kindacode.com/wp-content/uploads/2022/08/4.jpg',
  },
];

这个例子

应用预览

我们要使用的示例包含一个轮播。此轮播显示照片列表,每张照片都带有文字说明。

要移动到下一张照片,您可以使用右侧的“下一步”按钮。 如果你在最后,它会自动跳到第一张照片。要移至上一张照片,您可以使用上一张按钮。如果你在开始,它会直接跳到最后一张照片。

还有一排圆点表示当前处于活动状态的照片。此外,我们添加了淡入淡出动画,使变化平滑而不突然。

这是演示:

React:如何从头开始创建图像轮播

代码

  1. 为了确保我们有相同的起点,你应该初始化一个全新的 React 项目:
npx create-react-app kindacode-example

尽管生成了许多文件夹和文件,但我们只涉及 2 个:src/App.jssrc/App.css

2. App.js中的完整源代码(在评论中有解释):

// KindaCode.com
// src/App.js
import { useState } from 'react';
import './App.css';

// this array holds the data for the carousel
const photos = [
  {
    id: 'p1',
    title: 'Photo One',
    url: 'https://www.kindacode.com/wp-content/uploads/2022/08/1.png',
  },
  {
    id: 'p2',
    title: 'Photo Two',
    url: 'https://www.kindacode.com/wp-content/uploads/2022/08/2.png',
  },
  {
    id: 'p3',
    title: 'Photo Three',
    url: 'https://www.kindacode.com/wp-content/uploads/2022/08/3.jpg',
  },
  {
    id: 'p4',
    title: 'Photo Four',
    url: 'https://www.kindacode.com/wp-content/uploads/2022/08/4.jpg',
  },
];

function App() {
  // show the photo with this index
  const [currentIndex, setCurrentIndex] = useState(0);

  // move to the next photo
  // if we are at the end, go to the first photo
  const next = () => {
    setCurrentIndex((currentIndex + 1) % photos.length);
  };

  // move to the previous photo
  // if we are at the beginning, go to the last photo
  const prev = () => {
    setCurrentIndex((currentIndex - 1 + photos.length) % photos.length);
  };

  return (
    <>
      {/* Render the carousel */}
      <div className='slider-container'>
        {photos.map((photo) => (
          <div
            key={photo.id}

            // if the photo is the current photo, show it
            className={
              photos[currentIndex].id === photo.id ? 'fade' : 'slide fade'
            }
          >
            <img src={photo.url} alt={photo.title} className='photo' />
            <div className='caption'>{photo.title}</div>
          </div>
        ))}

        {/* Previous button */}
        <button onClick={prev} className='prev'>
          &lt;
        </button>

        {/* Next button */}
        <button onClick={next} className='next'>
          &gt;
        </button>
      </div>

      {/* Render dots indicator */}
      <div className='dots'>
        {photos.map((photo) => (
          <span
            key={photo.id}
            // highlight the dot that corresponds to the current photo
            className={
              photos[currentIndex].id === photo.id ? 'dot active' : 'dot'
            }
            // when the user clicks on a dot, go to the corresponding photo
            onClick={() => setCurrentIndex(photos.indexOf(photo))}
          ></span>
        ))}
      </div>
    </>
  );
}

export default App;

3、CSS是本项目不可缺少的一部分。这是您的src/App.css文件的代码:

* {
  box-sizing: border-box;
}

/* Slideshow container */
.slider-container {
  position: relative;
  margin: 50px auto 20px auto;
  width: 600px;
  height: 300px;
}

/* Style each slide */
.slide {
  display: none;
  width: 100%;
  height: 100%;
}

.photo {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  background: rgba(0, 0, 0, 0.3);
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border: none;
}

/* Position the "next" button to the right */
.next {
  right: 0;
}

/* On hover, add a semi-transparent black background */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Caption text */
.caption {
  position: absolute;
  bottom: 8px;
  width: 100%;
  padding: 8px 12px;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  color: #fff;
}

/* The dots indicator */
.dots {
  display: flex;
  justify-content: center;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 5px;
  background-color: #ccc;
  border-radius: 50%;
  display: inline-block;
  transition: 0.5s;
}

.active,
.dot:hover {
  background-color: gray;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: 0.3;
  }
  to {
    opacity: 1;
  }
}

4、运行项目,访问 http://localhost:3000 查看结果。

结论

恭喜!你做到了,一个元素图像轮播。通过从头开始编写代码,您可以深入了解底层机制,并获得根据自己的喜好自定义项目的自由,并且不依赖第三方库。

免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » React:如何从头开始创建图像轮播