共用代码
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 没什么好说的
<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',文章来源:https://www.toymoban.com/news/detail-724831.html
.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>
<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'}文章来源地址https://www.toymoban.com/news/detail-724831.html
<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的实例
<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
}
到了这里,关于React Swiper.js使用(详细版)3D聚焦特效,自定义导航按钮等的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!