当前位置：首页 > news >正文

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

news 来源：原创 2024/5/11 0:51:53

共用代码

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

 <SwiperclassName="house"lazy={true}modules={[Navigation, Pagination]}spaceBetween={60}slidesPerView={3}watchSlidesProgressnavigation={{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',


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

  <div className="swiper2-button-prev swiper-button-prev"><img src={leftArrow} alt="上一张" /></div>
<Swipernavigation={{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'}

  <SwiperslidesPerView={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的实例

<SwiperclassName="swiperRe"lazy={true}modules={[Navigation, EffectCreative]}spaceBetween={32}slidesPerView={2}effect={'creative'}onProgress={onProgress}
......const onProgress = (swiper: any) => {// 原谅我的黑魔法，太过黑盒了，都不知道从哪里获取swiper的实例。// eslint-disable-next-line curlyif (ref.current) returnref.current = swiper}