Swiper로 슬라이더를 간편하게 만들어보자!
리액트 폴더를 만들어주고, 아래 링크로 들어간다
swiper site🔽
https://swiperjs.com/
그리고 사이트 상단에 Docs를 호버하면 메뉴가 나온다.
여기서 Swiper React를 클릭해주자!
페이지로 들어가면 리액트에서 사용할 수 있는 방법이
적혀져 있다.
npm i swiper 를 터미널에 입력해 스와이퍼를 설치해준다.
설치가 완료되면 아래와 같은 메세지가 나온다
Microsoft Windows [Version 10.0.19045.3693]
(c) Microsoft Corporation. All rights reserved.
C:\Users\Administrator\Desktop\내폴더\test-1121>npm i swiper
added 1 package, and audited 1533 packages in 3s
247 packages are looking for funding
run `npm fund` for details
8 vulnerabilities (2 moderate, 6 high)
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
먼말인진 나는 모른다.
아무튼 될 것같은 느낌이 들었으니 다음으로 넘어간다!
진행시켜~
이제 맘에드는 슬라이더를 찾아보자 (제일 신나는 시간)
상단에 Resources를 호버해서 Demos로 들어가주자
아래로 스크롤하면 아주 다양한 슬라이드 예시들이 있다 👍
React버튼을 클릭해서 들어가주자~
그럼 이렇게 나온다~
여기서 App.js라고 써져있는 문서를 다 긁어와서 내가 아까만든
리액트 폴더의 App.js에다가 싹 바꺼주자!
그러고 npm start를 눌러주면
두구두구
.
..
...
안나온당.
왜냐하면 import './style.css';도
퍼와야되는데 귀찮아서 안퍼왔기 때문이다..
일단 우짤 내가 만들고 싶은대로 만들거기 때문에
그냥 소심하게 index.css로 바꺼주었다!
다시 하면 위 사진 처럼 이러캐 나온다..
당황하지말고 안에 내용을 채워주자~
일단 슬라이더 여러개는 필요없어서 약간 수정을 했다
저 슬라이드 내용부분의 SwiperSlide 태그가 하나의 슬라이드가 될 부분이다!
내가 원하는 개수만큼 할 수 있으니 내용에 따라서 수정하면 된다
원래 여러개있었는데 난 3개만 해보았다
그리고 커스텀할 부분은 저렇게 쓰여있는데 지우거나 하면
버튼도 없앨수있고 등등 그렇다
이제 내용을 채워주자~
일단 아래 코드처럼 사진만 넣어주었다!
export default function App() {
return (
<>
<Swiper
cssMode={true}
navigation={true}
pagination={true}
mousewheel={true}
keyboard={true}
modules={[Navigation, Pagination, Mousewheel, Keyboard]}
className="mySwiper"
>
<SwiperSlide><img src="./img/img1.jfif"/></SwiperSlide>
<SwiperSlide><img src="./img/img2.jfif"/></SwiperSlide>
<SwiperSlide><img src="./img/img3.jfif"/></SwiperSlide>
</Swiper>
</>
);
}그럼 예쁜 슬라이드가 생겨난다!
다음 게시글에서 커스텀하는 법을 적어봐야겠다
js로는 많이써봤는데 리액트로 하려니까 약간 어렵다..
🔽결과화면🔽
