React使用Swiper实现3D coverflow 效果

下面是.ts文件代码

import React, { useEffect } from 'react';
import classnames from 'classnames';
import { Row } from 'antd';
import styles from './index.less';
const Videoportal = () => {useEffect(() => {const a = new Swiper('.swiper-container2', {effect: 'coverflow',grabCursor: true,centeredSlides: true,initialSlide: 2,slidesPerView: 'auto',// slidesPerView: 3,coverflowEffect: {rotate: 50,stretch: 90,depth: 100,modifier: 1,slideShadows: true,},navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},});}, []);return (<Row className={styles.videoContainer}><Row className={styles.videoBox}><div className={styles.title}>视频门户</div><divclassName={classnames({'swiper-container2': true,[styles.swiper]: true,})}><divclassName={classnames({'swiper-wrapper': true,[styles.wrapper]: true,})}><divclassName={classnames({'swiper-slide': true,[styles.slide1]: true,})}></div><divclassName={classnames({'swiper-slide': true,[styles.slide2]: true,})}></div><divclassName={classnames({'swiper-slide': true,[styles.slide3]: true,})}></div><divclassName={classnames({'swiper-slide': true,[styles.slide4]: true,})}></div><divclassName={classnames({'swiper-slide': true,[styles.slide5]: true,})}></div><divclassName={classnames({'swiper-slide': true,[styles.slide6]: true,})}></div></div></div></Row><Row className={styles.occlusion_left}></Row><Row className={styles.occlusion_right}></Row><divclassName={classnames({'swiper-button-prev': true,[styles.prev]: true,})}></div><divclassName={classnames({'swiper-button-next': true,[styles.next]: true,})}></div></Row>);
};export default Videoportal;

.less文件代码

.videoContainer {width: 100%;height: 100%;.videoBox {width: 100%;height: 100vh;background-color: #fff;user-select: none;display: flex;flex-direction: column;align-items: center;.title {padding-top: 80px;width: 100%;font-size: 34px;font-weight: bold;color: #333333;}background-color: #fff;overflow: hidden;width: 950px;.swiper {padding-top: 100px;width: 100%;.wrapper {width: 100%;margin-top: 100px;}.slide1 {background-image: url(../../../../assets/portal/bg1.png);}.slide2 {background-image: url(../../../../assets/portal/bg1.png);}.slide3 {background-image: url(../../../../assets/portal/bg1.png);}.slide4 {background-image: url(../../../../assets/portal/bg1.png);}.slide5 {background-image: url(../../../../assets/portal/bg1.png);}.slide6 {background-image: url(../../../../assets/portal/bg1.png);}.slide1,.slide2,.slide3,.slide4,.slide5,.slide6 {background-position: center;background-size: cover;width: 400px;height: 318px;}:global(.swiper-slide-shadow-left) {background-image: none !important;}:global(.swiper-slide-shadow-right) {background-image: none !important;}}}
}
.prev {z-index: 3000;position: absolute;left: 100px;background-image: url(../../../../assets/portal/left.png);
}
.next {position: absolute;right: 100px;background-image: url(../../../../assets/portal/right.png);
}

另外需要在document文件中导入Swiper的js文件和css文件

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">

这个是云上的CSS文件

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>

这是云上的js文件，以上都是Swiper6的，可以自己下载下来放在自己的CDN上面

最后一定要注意：如果需要new多个实例，每个的名字不能一样，否则会覆盖掉上一个，可以用不同的选择器来作为每个实例的标识，解决

React使用Swiper实现3D coverflow 效果相关推荐

Vue项目中使用swiper插件开发3d轮播图
在开发过程中有3D轮播图的需求,使用vue-awesome-swiper完成先贴个效果图安装npm install swiper@5.4.5 vue-awesome-swiper -S 全局引入并 ...
Swiper制作3d旋转木马轮播
Swiper制作3d旋转木马轮播现在html5页面效果用户体验要求原来越高了,慢慢出现了好多小伙伴需要使用到类似3d效果的旋转木马轮播,现本人通过Swiper插件制作一个该效果,下面会附上效果图和源 ...
swiper叠加轮播效果（含源码） - 案例篇
swiper叠加轮播效果(含源码) - 效果图效果图: 图片素材来源于网络. [swiper 源码效果 · 对比地址] 代码: <!DOCTYPE html> <html lang ...
在react中用echarts实现3d地球
在react中用echarts实现3d地球 1.安装echarts,和3d,去官网看如何安装就行 2.导入import echarts from 'echarts' import echartsGL ...
react可视化项目 ECharts 3D区域地图图表+点击取消高亮黄色
react 可视化项目 ECharts 3D区域地图图表地图介绍 echarts图表引入 react页面中引入使用地图介绍做可视化项目时需要3d的区域地图,在网上搜到ECharts社区的一个其他 ...
用WPF轻松打造iTunes CoverFlow效果
用WPF轻松打造iTunes CoverFlow效果原文:用WPF轻松打造iTunes CoverFlow效果用WPF轻松打造iTunes CoverFlow效果 ...
在 React Native 中实现 3D 动画
本文的范围将涵盖对 Three.js 库和 Animated API 的探索. 您应该具备 JavaScript 和 React Native 的基本知识才能继续学习: 要了解更多关于可以在 Reac ...
android 动画x轴旋转,Android Roate3dAnimation实现围绕y轴竖直方向或者绕x轴方向旋转的3d动画效果...
概要: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Roate3dAnim ...
css和js实现3d图片,JavaScript_纯JS实现旋转图片3D展示效果，CSS:style type=text/cssgt - phpStudy...
纯JS实现旋转图片3D展示效果 CSS: #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute; ...

React使用Swiper实现3D coverflow 效果

React使用Swiper实现3D coverflow 效果相关推荐

最新文章

热门文章