react的Swiper使用，自动循环播放_swiper 循环播放

1、组件引入

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

import 'swiper/swiper.less';
import "swiper/components/pagination/pagination.min.css"
import { useState } from 'react';
1
2
3
4
5
6

2、自动播放设置

SwiperCore.use([Autoplay, Pagination, Navigation]);
1

3、html代码

  <Swiper
    spaceBetween={0}
    centeredSlides={true}
    slidesPerView='auto'
    autoplay={{
      delay: 5000,
      disableOnInteraction: false,
    }}
    loop
    pagination={{
      "clickable": true
    }}
    onSlideChange={() => console.log('slide change')}
    onSwiper={(swiper) => console.log(swiper)}
  >
    <SwiperSlide>Slide 1</SwiperSlide>
    <SwiperSlide>Slide 2</SwiperSlide>
    <SwiperSlide>Slide 3</SwiperSlide>
    <SwiperSlide>Slide 5</SwiperSlide>
    <SwiperSlide>Slide 6</SwiperSlide>
    <SwiperSlide>Slide 7</SwiperSlide>
    <SwiperSlide>Slide 8</SwiperSlide>
    <SwiperSlide>Slide 9</SwiperSlide>
    <SwiperSlide>Slide 10</SwiperSlide>
  </Swiper>
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

4、样式

.swiper-container {
  width: 100%;
  height: auto;
  margin: 20px auto;
  .swiper-wrapper {
    .swiper-slide {
      border: 1px solid red;
      width: 25%;
      height: 270px;
      margin-top: 17px;
    }
    .swiper-slide-active {
      margin-top: 0px;
      width: 28%;
      height: 304px;
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

5、效果