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

【问题标题】：How to center and align images correctly in react-id-swiper如何在 react-id-swiper 中正确居中和对齐图像
【发布时间】：2021-09-02 22:09:21
【问题描述】：

现在我正在为我的 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包有问题，所以我降级了。

【问题讨论】：

标签： javascript css reactjs swiper

【解决方案1】：

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

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

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

【讨论】：