开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

#摘要

对于组件的轮播效果，你是否觉得很浪费时间呢？那么那个组件库可以很好的满足外面的需求呢？在我看来很多swiper组件之后，确定了就是swiper了。

swiper-demos(演示地址)

如果不清楚他是干什么，那么请点击上方的演示地址。进入后请往下滑，看对应的示例。相信你可以很快的找到你需要实现的效果。

swiper中文网

#简介

swiper为我们提供多端的轮播效果。在官网首页中外面不难发现所需要的内容。

vue中使用swiper最新版本
React中使用swiper最新版本
swiper6文档

我个人的技术栈主要是React，那么在下面的介绍过程中。我主要已React的使用介绍为主。

# 使用

安装

• 请注意只能使用npm进行安装（默认是安装最新版本的）
• 这里默认安装的是最新版但在引入css的时候会出现找不到包的情况因此请按照第六版本swiper6文档

// 安装最新版本
npm i swiper


// 安装第六版本不会出现css资源找不到的错误
npm i swiper@6

安装完成后

swiper/react导出两个组件 Swiper 和 SwiperSlide:swiper作为父容器，swiperSlide是对应的子容器哦。外面只需要把想要轮播的元素添加进去就可以了。代码如下

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

// Import Swiper styles  
// （这里如果你安装的是最新版，可能会出现错误，说找不到对应的包） 原因是版本问题
import 'swiper/swiper-bundle.css';

export default () => {
  return (
    <Swiper
      spaceBetween={50}
      slidesPerView={3}
      onSlideChange={() => console.log('slide change')}
      onSwiper={(swiper) => console.log(swiper)}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
      ...
    </Swiper>
  );
};

这里是一个很基础的轮播效果，如果你需要渲染您需要的内容，那么swiper-demos(演示地址)请到这里找到您需要的效果的代码，复制粘贴到你的代码中即可实现你的效果。至此就解决了你的业务问题。如果需要深入学习的话，请继续阅读。

#swiper属性

## 基础属性

这里我只介绍比较常用的属性，对于其他属性不做过多的介绍。

swiper属性	含义
initialSlide	设定初始化时slide的索引，默认是展示第一个，如果你需要让他在首屏访问，那么你会用到它
direction	Swiper的滑动方向，可设置为水平方向切换 horizontal 或垂直方向切换 vertical 。
speed	滚动速度
autoHeight	自适应高度
rewind	倒带效果
height	swiper的高度
width	swiper的宽度

## 旋转木马属性

旋转木马：swiper中实现，游乐园中旋转木马一样的时视觉感受。我们可以看到前面元素以及他后面的元素。如下图。

属性	介绍
# slidesPerView	可以看到的试图数量
# centeredSlides	居中幻灯片。
# spaceBetween	每个幻灯片之间的距离。
# slidesPerGroupSkip	每次滑动移动滑块的数量。

总结

在平时的软件开发过程中，我们会应对不同的需求，并对不同的需求给出对应的解决方案。使用swiper可以大大的减少我们的开发的成本。上面的内容是我本次业务所需要使用的内容与属性。后期每次使用都会来进行补充。