如何解决react-id-swiper不适用于3d Coverflow
我正在尝试为该项目集成3d封面流程,但是该封面流程无法按预期工作,我提供了图像和代码。在此先感谢您的帮助!
我尝试使用最新的软件包,但发现该软件包不起作用,因此我尝试了这些旧版本,该软件包也无法正常工作,我使用的版本是“ react-id-swiper”:“ 2.3.2”, “ swiper”:“ ^ 6.1.2”。
代码:
import React from 'react'
import Swiper from 'react-id-swiper';
import 'react-id-swiper/lib/styles/css/swiper.css';
import './App.css';
class App extends React.Component{
render() {
const params = {
effect: 'coverflow',grabCursor: true,centeredSlides: true,slidesPerView: 'auto',coverflowEffect: {
rotate: 50,stretch: 0,depth: 100,modifier: 1,slideShadows: true
},pagination: {
el: '.swiper-pagination'
}
}
return (
<React.Fragment >
<Swiper {...params}>
<div style={{ backgroundImage:'url(http://lorempixel.com/600/600/nature/1)' }} />
<div style={{ backgroundImage:'url(http://lorempixel.com/600/600/nature/2)' }} />
<div style={{ backgroundImage:'url(http://lorempixel.com/600/600/nature/3)' }} />
<div style={{ backgroundImage:'url(http://lorempixel.com/600/600/nature/4)' }} />
<div style={{ backgroundImage:'url(http://lorempixel.com/600/600/nature/5)' }} />
</Swiper>
</React.Fragment>
);
};
}
export default App;
输出:
解决方法
你好吗,兄弟。我也遇到了同样的问题,我意识到原因之一是swiper
软件包的最新版本缺少一些CSS(如果要使用{{1},则需要swiper
软件包})。对于react-id-swiper
,可以安装最新版本,但是将react-id-swiper
软件包降级到5.3.8可以达到目的。
让我知道这是否可以解决问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。