react-id-swiper 不适用于 3d coverflow

Question

我正在尝试为项目集成 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;

输出：

Answer 1

兄弟最近怎么样。我也有同样的问题，我意识到原因之一是 swiper 包的最新版本缺少一些 css （如果你想使用，你需要 swiper 包react-id-swiper)。对于 react-id-swiper，可以安装最新版本，但将 swiper 软件包降级到 5.3.8 就可以了。

如果这能解决问题，请告诉我。

react-id-swiper 不适用于 3d coverflow

react-id-swiper not working for 3d coverflow

frontend

node.js

swiper

reactjs