Блог

Главная - Вопросы по программированию - Как правильно центрировать и выравнивать изображения в react-id-swiper

Как правильно центрировать и выравнивать изображения в react-id-swiper

#javascript #css #reactjs #swiper

Вопрос:

Сейчас я работаю над своим проектом 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) Поэтому я использовал пакет npm react-id-swiper для этого. Но когда я это реализовал, у меня появился такой слайдер. введите описание изображения здесь

введите описание изображения здесь

введите описание изображения здесь

Итак, мой код таков,

 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.

Ответ №1:

Поэтому я понизил рейтинг своего пакета swiper до "swiper": "6.6.0" и также удалил react-id-swiper пакет. А затем я последовал за API swiperJS и внедрил некоторый код из этого в свой проект. И в дополнение к этому я добавил css-код также к этому. Только этот код.

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

Так что это было решено. Таким образом, окончательный вывод состоит в том, что мы должны использовать более ранний пакет npm, а также некоторый код css для управления положением слайдера, а также для правильного управления пространством между слайдерами.

Метки: