只需安装 yarn add swiper 即可
主要是实现如下箭头自定义, 直接代码,
引入
import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Navigation, Pagination } from 'swiper';
使用
return (
<Swiper
className='swiper'
spaceBetween={0}
navigation={{
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
disabledClass: 'disable' // 当导航按钮变为不可用时添加的class,也就是当swiper索引为0时上一张没有prevEl的class类名就会添加一个disable,也就是.swiper-button-prev .disable
}}
pagination={{
bulletClass: 'swiper-pagination-bullet zlz',
bulletActiveClass: 'swiper-pagination-bullet-active zlz-active',
clickable: true,
}}
// direction='vertical'
mousewheel={true}
slidesPerView={1}
onSlideChange={() => {
// changeStep(current.swiper.activeIndex, 'swiper')
}}
onSwiper={(swiper) => {
current.swiper = swiper
}}
>
<SwiperSlide className='progress-item'>
<GJ/> // 图片
</SwiperSlide>
<SwiperSlide className='progress-item'>
<TJ/> // 图片
</SwiperSlide>
<SwiperSlide className='progress-item'>
<Child/> // 图片
</SwiperSlide>
<div className="swiper-button-prev">上一个</div>
<div className="swiper-button-next">下一个</div>
</Swiper>
)
css
.swiper{
height: 100%;
flex: 1;
.progress-item{
width: 100%;
height: 100%;
.pic,.img{
width: 100%;
height: 100%;
}
}
.white{
color: #fff;
}
.zlz{
width: 10px;
height: 4px;
border-radius: 0;
&.swiper-pagination-bullet{
background: rgba(255,255,255,.8);
}
&.swiper-pagination-bullet-active{
background: rgba(255,255,255,1);
}
}
.swiper-button-prev,.swiper-button-next{
position: absolute;
top: 50%;
width: 50px;
height: 50px;
background: red;
&::after{
display: none;
}
&.disable{
background: royalblue;
}
}
}
我是使用的nextjs