React Swiper.js使用(详细版)3D聚焦特效,自定义导航按钮等

这篇具有很好参考价值的文章主要介绍了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  没什么好说的

 


<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',


.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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • THREE.JS使用详细(three.js创建3d物体,three.js的使用方式)

    简述:three.js封装了WebGL的底层细节,是一款运行在浏览器中的 3D 引擎,可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象,目前在Git上已经拥有90k+的star,今天用three.js来构建一个三维模型; 1、首先,在项目中需要下载threejs的相关依赖; 2、在js页面引入使

    2024年01月23日
    浏览(76)
  • uniapp使用swiper组件实现3D轮播效果

    使用uniapp 中的 swiper组件实现一个3D轮播图 关键属性: 1. circular: 采用衔接滑动 2.previous-margin: 前边距,用于露出前一项的一小部分 3.next-margin: 后边距,用于露出后一项的一小部分 效果图:     实现代码:(vue3)

    2024年02月15日
    浏览(51)
  • 最详细!!!前端原神官网 (采用html+css+js+dom+ajax+jquery+swiper+json)完整版

    1.该项目采用了大部分前端知识, 完整的复刻原神官网上所显示的全内容 ,非常全面和详细。希望有兴趣的小伙伴萌可以看看和参考一下!!!该项目可以作为大学生 毕设项目(附带项目答辩ppt) 同时也可以作为计算机专业的小伙伴的 期末大作业 。喜欢的请留下你的足迹

    2024年02月05日
    浏览(58)
  • vue2项目之swiper.js 的使用

    swiper.js 的使用 官网 API(部署在 swiper 实例中):https://www.swiper.com.cn/api/index.html 官网轮播图(查看源代码):https://www.swiper.com.cn/demo/index.html 接下来介绍怎么在 vue2 里使用 swiper.js (vue2 使用 swiper5版本) 1、安装、引入css 2、在组件中使用:引入 js 引入 html 结构 html 结构:

    2024年02月05日
    浏览(49)
  • react js自定义实现状态管理

    和源码可能不同,我没看过源码,只是实现一下 不足的是,还是需要forceUpdate 实现模块化

    2024年01月18日
    浏览(38)
  • React Navigation 使用导航

    在 Web 浏览器中,您可以使用锚标记链接到不同的页面。当用户单击链接时,URL 会被推送到浏览器 历史记录堆栈 中。当用户按下后退按钮时,浏览器会从历史堆栈顶部弹出该项目,因此活动页面现在是以前访问过的页面。React Native 不像 Web 浏览器那样具有全局历史堆栈的内

    2024年02月11日
    浏览(52)
  • react+video.js h5自定义视频暂停图标

    目录 参考网址 效果图,暂停时显示暂停图标,播放时隐藏暂停图标 代码说明,代码传入url后,可直接复制使用 VideoPausedIcon.ts 组件 VideoCom.tsx Video.module.less 参考网址  在Video.js播放器中定制自己的组件 - acgtofe 效果图,暂停时显示暂停图标,播放时隐藏暂停图标 代码说明,代

    2024年02月02日
    浏览(44)
  • 【three.js / React-three-fiber】加载3D模型性能优化

    无论是大型虚拟世界还是简单的网站,性能优化都是必要的。 特别是在运用三维模型的情况下,我们需要更加深入的优化。因为 三维模型通常包含大量的数据和复杂的几何形状 ,如果不进行性能优化,浏览器可能会因为负载过重而崩溃。 在本文中,我们将探讨如何在 thre

    2024年02月02日
    浏览(47)
  • 实现swiper 3d 轮播效果

    先上个效果图,代码可以直接拿~ 因为项目用的是nuxt2,所以考虑到swiper的兼容问题,选择的是\\\"swiper\\\": “^5.2.0” 首先是安装swiper和vue-awesome-swiper,并指定版本 然后引入,在nuxt.config.js中引入 在plugins下新建一个vue-swiper.js 在components下新建一个VueSwiper.vue 在plugins下引入 然后是使

    2024年04月17日
    浏览(38)
  • RN 使用react-navigation写可以滚动的横向导航条(expo项目)

      装包:             参考链接: https://chat.xutongbao.top/ https://www.cnblogs.com/tengyuxin/p/13263143.html https://reactnavigation.org/docs/material-top-tab-navigator/ 

    2024年02月13日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包