리액트 swiper 사용법

리액트 첨 해보는데 진심 개빡침

난 이걸 왜 쓰는지 모르겠다... swiper 쓰는데도 구글링으로 나온 글 다 하라는대로 했는데

몽땅 다 안돼서 개빡쳤음 진심 레알...

이걸로 2시간 삽질함 거지같아

 

일단 나는 swiper 9.3.2 버전을 사용했다.

 

1. npm으로 swiper 다운로드 하기

나는 인텔리제이를 사용하고 있어서 인텔리제이 터미널에 가서

npm install swiper@9.3.2

명령어로 swiper 9.3.2 버전을 다운로드 했다.

확인하려면 리액트 다운 받은 디렉토리에 package.json을 보면 swiper 몇버전을 받았는지 알 수 있고

node_modules에 swiper 디렉토리가 있는 것을 확인할 수 있다.

 

2. 필요한 기능들 import 하기

나는 아래와 같이 import 했다.

import React from 'react'
import {Swiper, SwiperSlide} from 'swiper/react';
import SwipeCore,{Navigation,Pagination,Autoplay, Scrollbar} from 'swiper';

import 'swiper/css';
import 'swiper/css/autoplay'
import 'swiper/scss/navigation'
import 'swiper/scss/pagination'

SwipeCore.use([Navigation,Pagination,Autoplay])

 

3. 코드 작성

function Home() {
    return (
        <div>
            <Swiper
                className="homeBanner"
                spaceBetween={50}
                slidesPerView={1}
                navigation
                pagination={{ clickable: true }}
                scrollbar={{ draggable: true }}
                onSwiper={(swiper) => console.log(swiper)}
                onSlideChange={() => console.log('slide change')}
                autoplay={{delay: 2000}}>
                <SwiperSlide><img src={process.env.PUBLIC_URL + '/banner1.png'}/></SwiperSlide>
                <SwiperSlide><img src={process.env.PUBLIC_URL + '/banner2.png'}/></SwiperSlide>
            </Swiper>
        </div>
    );
}

이미지는 public 폴더에 넣어놨다.

 

근데 여기서 도대체 삽질할게 무엇이 있나?

구글링으로 다 나온 import랑 코드를 썼을때는 자꾸 modules를 찾을 수 없다고 나왔다.

import {Navigation,Pagination,Autoplay, Scrollbar} from 'swiper/modules';

아마 내 기억으로는 이런 import가 있었던 것으로 기억...

저렇게 swiper/modules에 있는걸 찾아가라니까 자꾸 modules가 없다고 에러 발생...

근데 저 /modules만 없애니까 동작 잘 됨...

혹시라도 무슨 modules가 없다 이런식으로 나오면 걍 그 경로를 지워버리고 swiper만 써보자...

 

아래는 전체 코드

import React from 'react'
import {Swiper, SwiperSlide} from 'swiper/react';
import SwipeCore,{Navigation,Pagination,Autoplay, Scrollbar} from 'swiper';

import 'swiper/css';
import 'swiper/css/autoplay'
import 'swiper/scss/navigation'
import 'swiper/scss/pagination'

SwipeCore.use([Navigation,Pagination,Autoplay])

function Home() {
    return (
        <div>
            <Swiper
                className="homeBanner"
                spaceBetween={50}
                slidesPerView={1}
                navigation
                pagination={{ clickable: true }}
                scrollbar={{ draggable: true }}
                onSwiper={(swiper) => console.log(swiper)}
                onSlideChange={() => console.log('slide change')}
                autoplay={{delay: 2000}}>
                <SwiperSlide><img src={process.env.PUBLIC_URL + '/banner1.png'}/></SwiperSlide>
                <SwiperSlide><img src={process.env.PUBLIC_URL + '/banner2.png'}/></SwiperSlide>
            </Swiper>
        </div>
    );
}

export default Home;