这是我参与「第四届青训营」笔记创作活动的的第15天
无论什么网页，轮播图一定是主页的c位，用于展示最主要的信息，本文将介绍如何利用swiper快速实现轮播图。

Swiper 的概述

Swiper 的每个展示块（屏）为一个slide，slide中放置图片或文字等展示的内容，全部slide排成一行(或多行)包含在包装器wrapper中，而总容器container 又包裹着wrapper和箭头按钮控件navigation以及分页器控件pagination。当手指（或鼠标）触摸滑动Swiper时，Swiper在浏览器每一帧通过计算滑动的距离差对wrapper进行位移（transform）从而产生拖动的效果。在手指（或鼠标）释放时，计算下一个slide的起始位置对wrapper设置位移动画（transition），从而产生切换动画效果。

swiper的版本迭代很快，目前已经到了 8.3.2 ，而网上很多教程都还是很低的版本。所以本文将基于最新版的swiper介绍在react中的使用。

Swiper 基本用法

从swiper/react中导入最核心的两个组件Swiper和SwiperSlier。

// import Swiper core and required modules
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';

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

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';

export default () => {
  return (
    <Swiper
      // install Swiper modules
      modules={[Navigation, Pagination, Scrollbar, A11y]}
      spaceBetween={50}
      slidesPerView={3}
      navigation
      pagination={{ clickable: true }}
      scrollbar={{ draggable: true }}
      onSwiper={(swiper) => console.log(swiper)}
      onSlideChange={() => console.log('slide change')}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
      ...
    </Swiper>
  );
};

`Swiper`组件

用于设置轮播图的相关属性，得到不同的效果，还可以引入一些模块

spaceBetween={10} 设置相邻两张轮播图之间的间距
slidesPerView={1} 展示的数量可以是小数比如1.2，如果设置为2就是同时展示两张轮播图第一张是通过滑动展示的spaceBetween,第二张是静态下的展示的。

`SwiperSlier`组件

一个SwiperSlier组件就代表着一张轮播图，SwiperSlier组件需要被Swiper 组件包裹。
也可以根据数据来动态生成SwiperSlier组件

bannerList.map((item, index) => (
<SwiperSlide key={index}>
    <img src={item.imageUrl} width="100%" height="100%" alt="suggest"></img>
</SwiperSlide>
))

常见的钩子函数

useSwiper:获取 Swiper 内部组件中的 Swiper 实例
useSwiperSlide:是 Swiper 幻灯片内的组件获取幻灯片数据的另一个钩子（与SwiperSlide 渲染函数中的数据相同)

利用swiper封装react轮播图组件

该组件从props中获取轮播图的数据列表

核心代码

import React from 'react';
import { SliderContainer } from './style';
import { Swiper, SwiperSlide} from 'swiper/react'; // 引入轮播图
import {Autoplay, Pagination} from 'swiper';
import 'swiper/css';
import 'swiper/css/pagination'

function Slider (props) {
  const { bannerList } = props;
  return (
    <SliderContainer>
    <div className='before'></div>
      <div className="slider-container">
        <div className="swiper-wrapper">
        <Swiper
          modules={[Autoplay, Pagination]}
          spaceBetween={10}
          slidesPerView={1.2}
          loop
          autoplay={{
            delay: 3000,
            disableOnInteraction:true,
          }}
          pagination={{el: ".swiper-pagination", clickable:true}}
        >
          {
            bannerList.map((item, index) => (
              <SwiperSlide key={index}>
                <img src={item.imageUrl} width="100%" height="100%" alt="suggest"></img>
              </SwiperSlide>
            ))
          }
        </Swiper>

        </div>
        <div className="swiper-pagination"></div>
      </div> 
    </SliderContainer>
  );
}

export default React.memo(Slider);

样式代码

import styled from'styled-components';
import style from '../../assets/global-style';

export const SliderContainer = styled.div`
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: auto;
  background: white;
  .before {
    position: absolute;
    top: 0;
    height: 60%;
    width: 100%;
    background: ${style["theme-color"]};
  }
  .slider-container {
    position: relative;
    width: 98%;
    height: 160px;
    overflow: hidden;
    margin: auto;
    border-radius: 6px;
    .slider-nav {
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
    }
    .swiper-pagination-bullet-active {
      background: ${style["theme-color"]};
    }
  }
`

效果展示

就能得到这样一个轮播图的效果

swiper轮播图浅析 | 青训营笔记