当前位置：首页 > React

react swipe圆点实现

2026-01-27 02:17:07React

实现 React 轮播图圆点指示器

在 React 中实现轮播图的圆点指示器（Swipe Dots），通常需要结合轮播组件（如 react-swipeable 或第三方库）和状态管理。以下是两种常见实现方式：

使用 `react-swipeable` 和状态控制

安装依赖：

npm install react-swipeable

代码示例：

import { useState } from 'react';
import { useSwipeable } from 'react-swipeable';

function SwipeWithDots() {
  const [activeIndex, setActiveIndex] = useState(0);
  const items = ['Slide 1', 'Slide 2', 'Slide 3']; // 轮播内容

  const handlers = useSwipeable({
    onSwipedLeft: () => 
      setActiveIndex((prev) => (prev === items.length - 1 ? 0 : prev + 1)),
    onSwipedRight: () => 
      setActiveIndex((prev) => (prev === 0 ? items.length - 1 : prev - 1)),
  });

  return (
    <div>
      <div {...handlers} style={{ height: '200px', background: '#eee' }}>
        {items[activeIndex]}
      </div>

      {/* 圆点指示器 */}
      <div style={{ display: 'flex', justifyContent: 'center', gap: '8px' }}>
        {items.map((_, index) => (
          <button
            key={index}
            onClick={() => setActiveIndex(index)}
            style={{
              width: '10px',
              height: '10px',
              borderRadius: '50%',
              background: activeIndex === index ? '#333' : '#ccc',
              border: 'none',
              cursor: 'pointer',
            }}
          />
        ))}
      </div>
    </div>
  );
}

使用第三方库（如 `react-slick`）

安装依赖：

npm install react-slick slick-carousel

代码示例：

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

function SlickSliderWithDots() {
  const settings = {
    dots: true, // 启用默认圆点指示器
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    customPaging: (i) => (
      <div
        style={{
          width: '10px',
          height: '10px',
          borderRadius: '50%',
          background: i === settings.currentSlide ? '#000' : '#ccc',
        }}
      />
    ),
  };

  return (
    <Slider {...settings}>
      <div>Slide 1</div>
      <div>Slide 2</div>
      <div>Slide 3</div>
    </Slider>
  );
}

自定义圆点样式

若需完全自定义圆点逻辑，可通过 CSS 和状态控制：

/* CSS */
.dots-container {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
}

.dot.active {
  background-color: #333;
}

// React 部分
<div className="dots-container">
  {items.map((_, index) => (
    <div
      key={index}
      className={`dot ${activeIndex === index ? 'active' : ''}`}
      onClick={() => setActiveIndex(index)}
    />
  ))}
</div>