Проблема с созданием горизонтального слайдера через Swiper React

Question

Хочу сделать слайдер который будет показывать мои проекты . Сделал через массив объектов. Но почему-то слайды стоят друг по другом и когда переключаю слайд они оба влево отходят.

Вот код слайдера:

return (
    <>
      <Swiper
        modules={[Navigation, Keyboard, Mousewheel]}
        spaceBetween={50}
        slidesPerView={1}
        keyboard
        mousewheel
        navigation
      >
        {projects.map((item) => {
          return (
            <SwiperSlide className="projects-item" key={item.id}>
              <img src={item.img} alt={item.name} className="project-image" />
              <div className="projects-item-name">{item.name}</div>
              <div className="projects-item-desc">{item.desc}</div>
              <a href={item.githubLink}>
                <img src={githubImg} alt="githubLink" />
              </a>
            </SwiperSlide>
          );
        })}
      </Swiper>
    </>
  );

Answer 1

Скорее всего проблема кроется в отсутствие импорта стилей.

В документации это указано:

// Import Swiper styles
import 'swiper/css';

Помимо этого, в документации есть пометка насчёт Create React App, если вы вдруг используете его:

Create React App doesn't support pure ESM packages yet. It is still possible to use Swiper (7.2.0+) with it.

In this case we need to use direct file imports:

// Core modules imports are same as usual
import { Navigation, Pagination } from 'swiper/modules';
// Direct React component imports
import { Swiper, SwiperSlide } from 'swiper/swiper-react.mjs';
 
// Styles must use direct files imports
import 'swiper/swiper.scss'; // core Swiper
import 'swiper/modules/navigation.scss'; // Navigation module
import 'swiper/modules/pagination.scss'; // Pagination module

БЛОГ НА HUSL

Проблема с созданием горизонтального слайдера через Swiper React

Ответы (1 шт):