$$config title: 스와이퍼 수업페이지 keywords: - IT $$ # 스와이퍼 ## 스와이퍼 공식 홈페이지 - [스와이퍼 공식 홈페이지 이동하기](https://swiperjs.com/)
## 1단계 : HTML문서와 스와이퍼 연결하기 - [코드펜 열기](https://codepen.io/khjsbs324/pen/mdGWbQR) ```html ```
## 2단계 : HTML구조와, CSS구조 가져오기 - [코드펜 열기](https://codepen.io/khjsbs324/pen/NWLpKEy)
```html

Slide 1

Slide 2

Slide 3

...

``` ```css /* 스와이퍼 최상위 요소*/ .swiper { border: 2px solid red; } /* 스와이퍼 이미지 */ .swiper > .swiper-wrapper { border: 2px solid orange; } /* 스와이퍼 이미지 */ /* 자바스크립트 코드를 가져와야지 볼 수 있음 */ .swiper > .swiper-pagination { border: 2px solid green; } /* 스와이퍼 왼쪽, 오른쪽 방향키 */ .swiper > .swiper-button-prev, .swiper > .swiper-button-next { border: 2px solid blue; } /* 스와이퍼 스크롤바 */ /* 자바스크립트 코드를 가져와야지 볼 수 있음 */ .swiper > .swiper-scrollbar { border: 1px solid indigo; } ```
## 3단계 : 자바스크립트 가져오기 - [코드펜 이동하기](https://codepen.io/khjsbs324/pen/XWPMWzm) ```css // 2단계 자바스크립트 코드 가져오기 const swiper = new Swiper(".swiper", { /* Optional parameters 스와이퍼 방향 vertical = 세로 horizontal = 가로 */ direction: "horizontal", /* 스와이퍼가 끝났을때 반복여부 true = 반복 falae = 미반복 */ loop: true, /* If we need pagination 스와이퍼 순서를 알려주는 아이콘 아래 코드를 작성 : 아이콘 나타내기 아래 코드를 주석처리하거나 삭제 : 아이콘 삭제 */ pagination: { el: ".swiper-pagination" }, /* Navigation arrows 스와이퍼를 넘길 수 있는 왼쪽, 오른쪽 방향키 아이콘 아래 코드를 작성 : 아이콘 나타내기 아래 코드를 주석처리하거나 삭제 : 아이콘 삭제 */ navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev" }, /* And if we need scrollbar 스와이퍼 순서를 알려주는 스크롤바 아래 코드를 작성 : 스크롤바 나타내기 아래 코드를 주석처리하거나 삭제 : 스크롤바 삭제 */ scrollbar: { el: ".swiper-scrollbar" } }); ```
## 4단계 : 개발자모드에서 보이지않는 코드 가져오기 - [코드펜 이동하기](https://codepen.io/khjsbs324/pen/YzOZzjY)
## 5단계 : 스와이퍼에 배너 이미지 적용하기 - [코드펜 이동하기](https://codepen.io/khjsbs324/pen/xxaqVbQ)
## 6단계 : 스와이퍼 버튼 커스텀 - [코드펜 이동하기](https://codepen.io/khjsbs324/pen/LYJLmLW)

게시글 상세