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可以达到目的。

让我知道这是否可以解决问题。

frontend reactjs reactjs swiper