React Swiper.js使用（详细版）3D聚焦特效，自定义导航按钮等

共用代码

import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'

import { Navigation, Pagination, Scrollbar, A11y, Autoplay, EffectCreative } from 'swiper/modules';

import { Swiper, SwiperSlide, } from 'swiper/react';

普通版本

重点：  modules={[Navigation, Pagination]}   Swiper, SwiperSlide  没什么好说的

 



              {data.map((item: any) => {
                return (
                  
                    

                      
                      

                        
{item.projectName}
                        
{item.fullAddress}
                      
                    
                  
                )
              })}
            

自定义导航按钮 / 进度条 + 解决同一页面，多个swiper.js 导航切换按钮冲突问题

这里的重点是： 

1、 通过直接引入less文件 重新定义 swiper-button-prev等类 或 :global ，自定义导航按钮 / 进度条样式 

2、  防止冲突，swiper2-button-prev swiper-button-prev 通过在前端定义前缀，避免多个swiper.js使用 navigation={{  nextEl: '.swiper-button-next',

.swiper-pagination {
    bottom: 0px;
    top: unset;
    width: 120px;
    height: 11px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    color: antiquewhite;
}

.swiper-button-prev {
    position: absolute;
    left: 0px;
    top: 50%;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(131deg, rgba(33, 75, 148, 0.62) 0%, #001335 107%);

    &::after {
        display: none;
    }

    &.disable {
        background: #D8D8D8;
    }
}

.......

  

            
          

.......
 

 

            
          

3D聚焦特效版本

重点： 使用 creativeEffect= {{ ... }}   modules={[Autoplay, EffectCreative]}  effect={'creative'}

  
            {mockModuleBannerData.map((item: any) => {
              return (
                
                  
                
              )
            })}
          

获取swiper的实例

 {
    // 原谅我的黑魔法，太过黑盒了，都不知道从哪里获取swiper的实例。
    // eslint-disable-next-line curly
    if (ref.current) return
    ref.current = swiper
  }