基于React使用swiperjs实现竖向滚动自动轮播_react实现轮播效果

很多文章，都只提供了js部分，包括官方的文档也只有js部分，如果css设置不正确，会导致轮播图不自动播放。

使用的swiper版本：v11.0.3

文档

• https://swiperjs.com/get-started
• https://swiperjs.com/react

实现效果

使用vite创建react应用

pnpm create vite react-app --template react
1

完整依赖 package.json

{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "swiper": "^11.0.3"
  },
  "devDependencies": {
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@vitejs/plugin-react": "^4.0.3",
    "eslint": "^8.45.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "vite": "^4.4.5"
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

App.js

// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";

// import Swiper core and required modules
import { Autoplay } from "swiper/modules";

// import Swiper styles
import "swiper/css";
import "swiper/css/autoplay";

import "./App.css";

// 获取一个随机颜色值
function randomColor() {
  let r = Math.floor(Math.random() * 255);
  let g = Math.floor(Math.random() * 255);
  let b = Math.floor(Math.random() * 255);

  return `rgb(${r},${g},${b})`;
}

// 轮播数据
const list = [
  {
    backgroundColor: randomColor(),
  },
  {
    backgroundColor: randomColor(),
  },
  {
    backgroundColor: randomColor(),
  },
  {
    backgroundColor: randomColor(),
  },
];

function App() {
  return (
    <div className="swiper__wrap">
      <Swiper
        modules={[Autoplay]}
        direction="vertical"
        loop={true}
        slidesPerView={1}
        autoplay={{
          delay: 3000, // ms
        }}
      >
        {list.map((item, index) => {
          return (
            <SwiperSlide>
              <div
                className="swiper__slide"
                style={{ backgroundColor: item.backgroundColor }}
              >
                {index + 1}
              </div>
            </SwiperSlide>
          );
        })}
      </Swiper>
    </div>
  );
}

export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

App.css

.swiper__wrap {
  margin: 0 auto;
  margin-top: 200px;
}

.swiper {
  height: 200px;
  width: 300px;
}

.swiper__slide {
  line-height: 200px;
  background-color: pink;
  color: #fff;
  text-align: center;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

轮播的关键 需要设置swiper容器的尺寸

.swiper {
  height: 200px;
  width: 300px;
}
1
2
3
4

参考文章

有关swiper动态改变数据遇到的坑（不能自动滚动，自动跟新数据，切换不正常）