react 函数组件自定义swiper的navigation ，pagination_react swiper navigation

只需安装 yarn add swiper 即可
主要是实现如下箭头自定义， 直接代码，

引入

import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Navigation, Pagination } from 'swiper';
1
2

使用

 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>
 )
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
26
27
28
29
30
31
32
33
34
35
36
37

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;
     }
   }
 }
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39

我是使用的nextjs