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

共用代码

TypeScript 复制代码

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 没什么好说的

TypeScript 复制代码

 


<Swiper
              className="house"
              lazy={true}
              modules={[Navigation, Pagination]}
              spaceBetween={60}
              slidesPerView={3}
              watchSlidesProgress
              navigation={{
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
                disabledClass: 'disable',
              }}
              pagination={{
                el: '.swiper-pagination-house',
                type: 'progressbar',
              }}
            >
              {data.map((item: any) => {
                return (
                  <SwiperSlide key={item.id} style={{ width: 440 }}>
                    <div className={styles.bannerContainer_box}>
                      <img src={item.projectListPic} alt="暂无图片" width="360" height="360" loading="lazy" />
                      <div className={styles.textContainer}>
                        <p className={styles.title}>{item.projectName}</p>
                        <p className={styles.detail}>{item.fullAddress}</p>
                      </div>
                    </div>
                  </SwiperSlide>
                )
              })}
            </Swiper>

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

这里的重点是：

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

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

css 复制代码

.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;
    }
}

.......

TypeScript 复制代码

  <div className="swiper2-button-prev swiper-button-prev">
            <img src={leftArrow} alt="上一张" />
          </div>
<Swiper
  navigation={{
                nextEl: '.swiper2-button-next',
                prevEl: '.swiper2-button-prev',
                disabledClass: 'disable',
              }}

  pagination={{
                el: '.swiper-pagination-house',
                type: 'progressbar',
              }}
>
.......
 </Swiper>

 <div className="swiper2-button-next swiper-button-next">
            <img src={rightArrow} alt="下一个" />
          </div>

3D聚焦特效版本

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

TypeScript 复制代码

  <Swiper
            slidesPerView={3}
            loopedSlides={2}
            loop={true}
            watchSlidesProgress={true}
            centeredSlides={true}
            initialSlide={1}
            spaceBetween={-60}
            autoplay={{
              delay: 2500,
              disableOnInteraction: false,
            }}
            effect={'creative'}
            creativeEffect={{
              prev: {
                translate: [-396, 0, 0],
                scale: 0.9295,
              },
              next: {
                translate: [396, 0, 0],
                scale: 0.9295,
              },
              shadowPerProgress: true,
            }}
            modules={[Autoplay, EffectCreative]}
          >
            {mockModuleBannerData.map((item: any) => {
              return (
                <SwiperSlide key={item.id} style={{ width: 440 }}>
                  <img src={item.img} alt="暂无图片" width="440" height="440" />
                </SwiperSlide>
              )
            })}
          </Swiper>

获取swiper的实例

TypeScript 复制代码

<Swiper
          className="swiperRe"
          lazy={true}
          modules={[Navigation, EffectCreative]}
          spaceBetween={32}
          slidesPerView={2}
          effect={'creative'}
          onProgress={onProgress}
......

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