이 글은 노마드코더의 [ReactJS로 영화 웹 서비스 만들기]를 수강하며 정리한 글입니다.
⚛️ 기본 환경: IDE: VS code, Language: React
이어진 글: [ReactJS_영화_웹] #7 MOVIE APP
기존 Home.js: 왼쪽 화면이 세로로 반복
기존 Detail.js: 오른쪽 화면(영화 제목 클릭 시, 이동)
슬라이드쇼를 만들기 위한 라이브러리 설치
npm i react-slick
* 간단한 사용방법은 react-slick 사이트 참조
Neostack
The last react carousel you will ever need
react-slick.neostack.com
슬라이드쇼가 적용된 Home.js
Home.js
home.css
Movie.js
Movie.module.css
소스 코드
참고 자료
인프런 React 강의 듣고 사이트 만들기 _ Front 작업 08. react-slick으로 슬라이드 만들기 (customPaging 옵
customPaging 옵션을 이용한 작업방식입니다. 슬라이드 2개로 페이징을 구현하려면 새로 작성한 글을 참고해주세요! 사진첩 작업을 하기위해 react-slick 라이브러리를 활용해보겠습니다. 그냥 slick을
okayoon.tistory.com
[React] React slide 구현하기 react-slick 사용방법, 커스텀 방법
React-slick이란? react-slick은 react에서 슬라이드를 손쉽게 구현하도록 도와주는 라이브러리이다. 2. ...
blog.naver.com
slick - the last carousel you'll ever need
slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!
kenwheeler.github.io
'JavaScript > React' 카테고리의 다른 글
| [ReactJS_Complete] Wrapper Component (0) | 2023.05.27 |
|---|---|
| [ReactJS_영화_웹] #7 MOVIE APP UPGRADE(DETAIL) (0) | 2023.05.26 |
| [ReactJS_영화_웹] #7 MOVIE APP (0) | 2023.05.21 |
| [ReactJS_영화_웹] #7 COIN TRACKER (0) | 2023.05.18 |
| [ReactJS_영화_웹] #7 TO DO LIST (0) | 2023.05.17 |