[라이브러리] swiper.js 슬라이드 사용법, 커스텀, 적용실패이유, 옵션 정리, 반응형


[라이브러리] swiper.js 슬라이드 사용법, 커스텀, 적용실패이유, 옵션 정리, 반응형

swiper.js 라이브러리란 ? 따로 코드를 만들 필요 없이 swiper.js 의 링크들과 옵션들을 가져와서 쉽고 빠르고 다양한 슬라이드 구현 swiper.js 사용법 1. swiper.js 사이트 접속(Demos) 바로가기 2. 왼쪽 목록에서 원하는 슬라이드 찾아서 [core] 클릭 3. 파일에서 아래 목록들 복사해서 내 html 파일에 붙여넣기 1) css, js 링크 가져오기 - 미리 만들어진 슬라이드 코드들 2) body 안에 swiper 구조 가져오기 - 슬라이드 보이는 부분 3) script 가져오기 - 슬라이드 옵션 부분 4. 파일에서 .mySwiper 부분 영역(width, height) 잡아주고 옵션 변경해주면 완료 ! swiper 기본설정 커스텀하기 버튼 바꾸기 1단계 : 클래스 이름 바꿔주기 ex) swiper-button-next → 내가 원하는 클래스(btn-next) 2단계: 옵션 script 의 nextEl, prevEl 부분 변경해주기 ex) next...


#swiperjs #스와이퍼 #swiper화살표변경 #swiper슬라이드사용법 #swiper슬라이드 #swiper버튼커스텀 #swiper모양변경 #swiperslide작동안됨 #swiperjs옵션 #swiperjs반응형 #스와이퍼슬라이드

원문링크 : [라이브러리] swiper.js 슬라이드 사용법, 커스텀, 적용실패이유, 옵션 정리, 반응형