如何在 react-id-swiper 中正确居中和对齐图像

Question

现在我正在为我的 React 项目工作。我也是 react-id-swiper 的新手。所以我需要为我的网站制作一个旋转木马。(Like this:- https://codesandbox.io/s/reie4?file=/index.html:0-2857, https://react-id-swiper.ashernguyen.site/example/three-d-coverflow-effect) 所以我为此使用了 react-id-swiper npm 包。但是当我实现它时，我得到了一个像这样的滑块。

所以我的代码是，

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import 'swiper/css/swiper.css';
import Swiper from 'react-id-swiper';

const CoverflowEffect = () => {
  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 (
    <Swiper {...params}>
      <div>
        <img src="https://lh3.googleusercontent.com/MOf9Kxxkj7GvyZlTZOnUzuYv0JAweEhlxJX6gslQvbvlhLK5_bSTK6duxY2xfbBsj43H=w300"></img>
      </div>
      <div>
        <img src="https://lh3.googleusercontent.com/MOf9Kxxkj7GvyZlTZOnUzuYv0JAweEhlxJX6gslQvbvlhLK5_bSTK6duxY2xfbBsj43H=w300"></img>
      </div>
      <div>
        <img src="https://lh3.googleusercontent.com/MOf9Kxxkj7GvyZlTZOnUzuYv0JAweEhlxJX6gslQvbvlhLK5_bSTK6duxY2xfbBsj43H=w300"></img>
      </div>
      <div>
        <img src="https://lh3.googleusercontent.com/MOf9Kxxkj7GvyZlTZOnUzuYv0JAweEhlxJX6gslQvbvlhLK5_bSTK6duxY2xfbBsj43H=w300"></img>
      </div>
      <div>
        <img src="https://lh3.googleusercontent.com/MOf9Kxxkj7GvyZlTZOnUzuYv0JAweEhlxJX6gslQvbvlhLK5_bSTK6duxY2xfbBsj43H=w300"></img>
      </div>
      <div>
        <img src="https://lh3.googleusercontent.com/MOf9Kxxkj7GvyZlTZOnUzuYv0JAweEhlxJX6gslQvbvlhLK5_bSTK6duxY2xfbBsj43H=w300"></img>
      </div>
    </Swiper>
  );
};

ReactDOM.render(
  <React.StrictMode>
    <CoverflowEffect />
  </React.StrictMode>,
  document.getElementById('root')
);
export default CoverflowEffect;

那么我怎样才能把这个滑块放在网络的中间，还有我怎样才能减少这两张图片之间的差距？我尝试了很多但都失败了.

"react-id-swiper": "4.0.0",
"swiper": "5.4.5"

这些是我对 react-id-swiper 和 swiper 包的依赖。我降级了，因为导入时swiper包有问题

Answer 1

所以我将我的 swiper 包降级为 "swiper": "6.6.0" 并删除了 react-id-swiper 包。然后我按照 swiperJS 的 API 并在我的项目中实现了一些代码。除此之外，我还添加了 css 代码。就是这段代码。

.swiper-container {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
  background-color: transparent;
}

所以解决了。所以最后的结论是，我们必须使用早期的 npm 包和一些 css 代码来控制滑块的位置，并正确控制滑块之间的 space。

如何在 react-id-swiper 中正确居中和对齐图像

How to center and align images correctly in react-id-swiper

javascript

css

reactjs

swiper