安装

npm i swiper 

使用

在react中使用swiper

// 引入模块
import {Autoplay, Navigation, Pagination} from "swiper";
import {Swiper, SwiperSlide} from "swiper/react";

<Swiper
  className="mySwiper"
  modules={[Navigation, Pagination, Autoplay]}
  loop={true}
  autoplay={{
    delay: 3000,
  }}
  // 显示轮播图下面的几个小点
  pagination={{
    clickable: true,
  }}
  // 显示左右两边的导航
  navigation={true}
>
  {
    // 渲染数据
    banners?.map((item) => (
      <SwiperSlide key={item.img}>
        <img src={IMAGE_URL + '/' + item.img} alt=""/>
      </SwiperSlide>
    ))
  }
</Swiper>

问题

导航不能点击不能自动轮播

在添加了modules以及应用相关插件之后,发现导航不能点击,不能自动轮播,有可能是轮播图渲染了但是没有初始化,所以需要在Swiper组件上添加onSwiper 属性,然后在回调函数中调用swiper.autoplay.start()方法

代码如下:

<Swiper
  className="mySwiper"
  modules={[Navigation, Pagination, Autoplay]}
  loop={true}
  autoplay={{
    delay: 3000,
  }}
  // 显示轮播图下面的几个小点
  pagination={{
    clickable: true,
  }}
  // 显示左右两边的导航
  navigation={true}
  // 添加onSwiper属性
  onSwiper={(swiper) => swiper.autoplay.start()}
>
  {
    // 渲染数据
    banners?.map((item) => (
      <SwiperSlide key={item.img}>
        <img src={IMAGE_URL + '/' + item.img} alt=""/>
      </SwiperSlide>
    ))
  }
</Swiper>

另一种解决方法,当图片数据加载完成之后,再初始化轮播图,代码如下:

banners && banners.length > 0 ? (
  <Swiper
    className="mySwiper"
    modules={[Navigation, Pagination, Autoplay]}
    loop={true}
    autoplay={{
      delay: 3000,
    }}
    // show pagination
    pagination={{
      clickable: true,
    }}
    // show navigation buttons
    navigation={true}
  >
    {
      banners?.map((item) => (
        <SwiperSlide key={item.img}>
          <img src={IMAGE_URL + '/' + item.img} alt=""/>
        </SwiperSlide>
      ))
    }
  </Swiper>
) : (
  <p>No Banners Found Or Banners Loading</p>
)