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
  }
相关推荐
涵信29 分钟前
第九节:性能优化高频题-首屏加载优化策略
前端·vue.js·性能优化
前端小巷子41 分钟前
CSS单位完全指南
前端·css
SunTecTec1 小时前
Flink Docker Application Mode 命令解析 - 修改命令以启用 Web UI
大数据·前端·docker·flink
拉不动的猪2 小时前
前端常见数组分析
前端·javascript·面试
小吕学编程3 小时前
ES练习册
java·前端·elasticsearch
Asthenia04123 小时前
Netty编解码器详解与实战
前端
袁煦丞3 小时前
每天省2小时!这个网盘神器让我告别云存储混乱(附内网穿透神操作)
前端·程序员·远程工作
一个专注写代码的程序媛4 小时前
vue组件间通信
前端·javascript·vue.js
一笑code4 小时前
美团社招一面
前端·javascript·vue.js
懒懒是个程序员4 小时前
layui时间范围
前端·javascript·layui