[React Swiper] loop={true} 마지막 페이지 먼저보이는 에러
·
Frontend/React
loop : 자동 순환되게 설정을 했는데 처음 페이지 진입하면 마지막 페이지 부터 보여줌 구글 검색해 봤는데... 약간 Swiper 에러 같음 가뜩이나 pagination을 fraction타입으로 설정해놔서 3/3 -> 1/3 이런식으로 작동한다. initialSlide={1} 이라고 선언하니까 정상작동함 api 문서 설명에는 Index number of initial slide. 이렇게 작성되어있어서 0이라고 작성했는데 작동을 안함 알고보니 마지막 페이지가 swiper-duplicate? 라고 class가 주어져있고 젤 상단에 있어서 그랬던 것이였음 그래서 그 바로 뒤 index인 1을 주니까 1페이지부터 잘보여줬다.
[React Swiper] play, stop 버튼 만들기
·
Frontend/React
* 참고 문서 https://swiperjs.com/swiper-api#autoplay Swiper API Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com Autoplay를 모듈에 작성해준다. - disableOnInteraction -> 내가 만약 임의로 페이지를 넘겼을 때 (기본값이 true) true : 자동 재생이 멈춤 (재생버튼이 있으면 재생버튼을 눌러줘야지 다시 autoplay가 된다) false : 내가 임의로 넘긴 페이지부터 자동재생이 계속된다. 자동 재생 버튼 컴포넌트 만들기 아래 stackoverflow..
[React Swiper] 리액트에서 스와이퍼 사용하기
·
Frontend/React
리액트에서 Swiper 모듈 사용하기 * 일단 Swiper를 npm install 했다는 전제하에 1. swiper를 import 해준다. import React, { useRef, useState } from 'react'; import { Swiper, SwiperSlide } from 'swiper/react'; import SwiperCore, { Autoplay, FreeMode, Pagination, Navigation, A11y, } from 'swiper'; 2. swiper 컴포넌트 사용하기 swiper props로 공식문서를 확인하면서 필요한 것을 추가하면된다. https://swiperjs.com/swiper-api Swiper API Swiper is the most modern f..