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';
2、自动播放设置
SwiperCore.use([Autoplay, Pagination, Navigation]);
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>
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;
}
}
}
5、效果