React 中使用Swiper轮播_react swiper轮播

1. 导入swiper 第三方包

npm i swiper --save

 2. swiper版本号是 8.3.0

 3.导入swiper 相关组件函数

import { Swiper, SwiperSlide } from 'swiper/react'
import { Navigation, Autoplay, Pagination } from 'swiper'

4.Swiper中的引用

<Swiper
        spaceBetween={50}
        modules={[Autoplay, Navigation, Pagination]}
        autoplay={{delay: 2000}}
        // navigation
        loop
        pagination={{ clickable: true }}
        onSwiper={swiper => console.log(swiper)}>
        {imgs.map(item => (
          <SwiperSlide key={item.id}>
            <img src={item.img} alt='' />
          </SwiperSlide>
        ))}
        <div className="swiper-pagination"></div>
      </Swiper>

5.引入css样式，在index.html中引入css，这里引入的是官方cdn链接

<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">

6.成功实现轮播效果