리액트에 swiper 쓰는 예제 (dom 버전 오류해결법) (React swiper)

| 설치 및 기본 사용 예

https://swiperjs.com/react#use-swiper-slide

Swiper - The Most Modern Mobile Touch Slider

 

1. React와 React-DOM 패키지를 아래 버전으로 설치 

npm install react@18 react-dom@18

 

※ 만약, 이전 버전이 낮거나 높아서 사용이 안된다면, 아래 코드로 삭제후 위 코드로 다시 설치

npm uninstall react react-dom

 

 

2. Swiper 설치

  npm i swiper

 

 

3. Swiper 사용할 jsx에 코드 입력 

// Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react';

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

export default () => {
  return (
    <Swiper
      spaceBetween={50}
      slidesPerView={3}
      onSlideChange={() => console.log('slide change')}
      onSwiper={(swiper) => console.log(swiper)}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
      ...
    </Swiper>
  );
};

 

 

 

** 페이지 네이션, 오토플레이 등의 효과를 넣은 예제

예제 결과

import React, { useContext, useState} from "react";
import styles from './Home.module.css';

/* 슬라이드 swiper */
// Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react';
// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
// import Swiper core and required modules
import { Navigation, Pagination, Scrollbar , Autoplay, A11y } from 'swiper/modules';






function Home() {
    return(
        // <div className={styles.Home}>
        <Swiper
        // install Swiper modules
        modules={[Navigation, Pagination, Scrollbar, Autoplay, A11y]}
        spaceBetween={50}
        slidesPerView={3}
        navigation
        pagination={{ clickable: true }}
        onSwiper={(swiper) => console.log(swiper)}
        onSlideChange={() => console.log('slide change')}
        autoplay= {{delay:2000}}
      >
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
      </Swiper>
        
    )

    
    
};


export default Home;