| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | ||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 | 31 |
- 메일 보내기 react
- nextjs
- next15
- 프로그래머스
- web3-react
- 카카오지도 구현
- swiper
- 다중포인터
- Next.js 나이스 본인인증
- nextjs 메일보내기
- 구글 메일보내기
- react
- robots.txt
- github
- JavaScript
- 알고리즘
- App Router
- nextjs contact us
- 빈도수세기
- React 나이스 신원인증
- 사이트맵
- 프론트 본인인증
- Til
- 카카오맵 api
- react swiper
- pass인증
- 함수
- CSS
- 전체 너비로 css
- use Client
- Today
- Total
목록react swiper (2)
YEV.log
React | Swiper.js를 사용하여 카드 슬라이드 구현하기 (Slides per view)
Preview 카드 형식의 컴포넌트들을 swiper를 사용해 슬라이드 형식으로 구현하였고 반응형을 적용하였습니다. Swiper 라이브러리에 관한 기본적인 설명은 아래 글을 참고하여 주세요. https://3d-yeju.tistory.com/86 { fetch(`/data/swiper/swiper_card.json`) .then(res => res.json()) .then(res => { setSwiperList(res.data); }); }, []); return ( {swiperList && swiperList.length > 0 ? ( { swiperRef.current = swiper; }} slidesPerView={1} breakpoints={{ 800: { slidesPerView: 2, },..
React | Swiper.js를 사용하여 이미지 슬라이드 구현하기
Preview swiper 기본 세팅 및 무한 루프 기능 swiper.js 설치 npm i swiper --save 서버에서 받아오는 데이터 처럼 .json 형태의 파일을 fetch로 가져와 slide를 map으로 돌리려 합니다. // swiper_event.json { "data": [ { "img": "https://images.unsplash.com/photo-1661956603025-8310b2e3036d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80", "url": "https://www.naver.com/" }, { "img": "https://images.unspl..