.png)
자바스크립트&제이쿼리 국비수업(그린컴퓨터학원) 내용 중 슬라이드-Swiper에 대해서 정리해보자
슬라이드를 만들기 위해 Swiper를 사용해보았다
Swiper란?
슬라이더를 구현하는 자바스크립트의 강력한 라이브러리!👍 한 번 작성방법 익혀주면 슬라이드를 구현하기에 짱 편한 도구. 반응형으로 사용자가 직접 슬라이드를 움직이도록 제어할 수 있고, 가로 슬라이드, 세로 슬라이드, 자동 슬라이드 전부 구현 가능하다😎
Swiper 사용방법 3가지
- cdn으로 연결해서 사용하는 방법
- npm을 설치해서 사용하는 방법
- swiper js파일을 다운받아서 사용하는 방법
이 중 cdn으로 연결하여 슬라이드를 만들어 보았다
완성화면
작성과정!
1단계 : Get Started, cdn 링크연결
- 홈페이지에 접속해서 CDN 연결(.min은 축약판, CSS 축양판 링크와 JS 축약판 링크를 각각 복사해서 HTML head tag에 연결한다)
2단계 : 기본구조 작성
- swiper 사용시 주의 할 점은 필수로 HTML 클래스 명을 아래와 같은 구조로 지정해줘야 하는 것
- swiper-container > swiper-wrapper > swiper-slide 구조를 꼭 지켜줘야 함
✨HTML Layout Swiper 홈페이지에서 확인
- swiper 홈페이지에 작성해야 하는 html body 구조에 대해 나와있다
근데 pagination이 뭐고, navigition buttion이 뭐지?
- pagination : 페이지 번호를 의미하는 파란색 점 모양의 버튼을 삽입하기 위한 요소로 위 그림에서 동그라미 세개
- navigation buttons : 슬라이드가 앞, 뒤로 갈 수 있도록 제어하는 화살표 모양의 버튼을 위한 요소로 위 그림에서 파란 화살표
✨HTML Layout 작성
- Slide 1, Slide 2, Slide 3 부분에 원하는 슬라이드 이미지를 넣었다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link rel="stylesheet" href="./css/main.css">
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script defer src="./js/main.js"></script>
</head>
<body>
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<img src="./images/pilates1.jpg" alt=""></div>
<div class="swiper-slide">
<img src="./images/pilates2.jpg" alt=""></div>
<div class="swiper-slide">
<img src="./images/pilates3.jpg" alt=""></div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</body>
</html>
3단계 : JS 작성
✨Initialize Swiper 홈페이지에서 확인
- Swiper를 시작하기 위한 JS 명령들을 홈페이지에서 확인한 후, 제어하고 싶은대로 옵션들을 바꾸어 본다
- new Swiper('.swiper-container', {
direction: 'vertical', > 슬라이드 방향(수직)을 의미. 기본값은 'horizontal'(수평)이다 - pagination: {
el: '.swiper-pagination', > 페이지 번호가 있게 하겠다는 의미 - navigation: { > 네이게이션 버튼에 대한 명령. 이전 버튼, 다음 버튼
✨JS 명령문 작성
- direction: 'horizontal' > 수평 슬라이드. 기본값이지만 명시적으로 작성
- loop: true > 슬라이드 루프가 돌아가로도록 하겠다.
- pagination: {clickable : true} > 사용자가 페이지 번호를 클릭할 수 있도록 하겠다
- navigation: {prevEl:, nextEl:} > 이전 버튼, 다음 버튼에 대한 선택자 명시
new Swiper('.swiper-container', {
direction: 'horizontal',
loop: true,
pagination: {
el : '.swiper-pagination'
},
navigation: {
prevEl: '.swiper-button-prev',
nextEl: '.swiper-button-next'
}
});
4단계: CSS 작성
- 슬라이드가 생성되는 박스 가로/세로 너비 작성
- 네비게이션 버튼에 스타일 제어 : 버튼 가운데 정렬
- pagination 버튼에 스타일을 제어 : 부모요소를 기준으로 위치 잡고, 버튼 테두리 색 없앰
.swiper-container{
width: 800px;
height: 800px;
position:relative;
}
.swiper-pagination{
position:absolute;
top : 700px;
outline: none;
}
.swiper-button-prev,
.swiper-button-next{
position:absolute;
top : 350px;
display: flex;
justify-content: center;
align-items: center;
}
♪(^∇^*) 워-후!!（＾∀＾*）ﾉｼ