| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
- array
- hash
- 배열
- 네이버
- 우선순위큐
- Stack
- Queue
- 코딩테스트
- Java
- 스파르타코딩클럽
- 프로그래머스
- coding test
- Naver
- HashSet
- 자바
- 해쉬
- javac
- Eclipse
- Coding
- 자료구조
- 정렬
- compare()
- string
- point queue
- HTML
- CSS
- SQL
- Python
- programmers
- HashMap
- Today
- Total
youngik
Swiper Component 본문
Swiper
최근 다양한 웹사이트를 보면 swiper를 사용하지 않는 사이트는 잘 없는 것 같다.
Naver, Daum 등 화살표 표시로 지정된 범위에서 다양한 화면을 불러올 수 있는 기능이다.
Swiper 홈페이지에서 API로 기본적인 뼈대인 코드를 불러와서 동작을 확인할 수 있고
다양하게 사용자가 원하는대로 custom 또한 할 수 있다.
그러면 이제 Swiper를 어떻게 사용하는지에 대해서 한번 알아보자
▶swiper 공식 홈페이지 : swiperjs.com/
Swiper - The Most Modern Mobile Touch Slider
Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
swiperjs.com
Swiper를 사용하고 싶은 html 코드에 넣는 방법은 크게 3가지가 있다.
1. CDN을 사용하는 방법
2. local로 다운로드 해서 적용하는 방법
3. NPM을 통해서 설치하는 방법
예외적인 상황이 아니라면 필자는 1번 방법을 가장 추천해주고 싶다.
local로 다운로드하면 컴퓨터 내 용량을 잡아먹을 뿐더러, CDN을 이용하면 간편하게 1-2줄의 코드를 넣음으로써
쉽게 Swiper 구현이 가능하다. (*어렵게 보다는 쉽게하는게 좋지 않나?)
1. CDN을 사용하는 방법
간단하게 <link>와 <script>를 <head> 태그안에 삽입해서 사용하는 방법과
<script>에 브라우저의 ES module 형식으로 swiper를 사용하는 방법이 있다.
*ES module이란?
- 우리가 일반적으로 프로그래밍 언어는 scope 범위로 변수가 동작한다. 예를 들어 fun a와 fun b안에 각각 int a가 선언이 되어있다면 각각의 int a는 함수가 시작했을 때 할당하고 해제가 되는 것처럼 같은 이름이라도 다른 변수이다.
- html에서 변수를 각각 다른곳에서 불러오고 사용하기 전 우리가 일반적으로 변수를 여러개 함수내에서 사용되게 되면 전역변수로 선언을 하는데 (ex) main 함수 부분 등) 이러한 방식은 html에서 오류를 많이 발생시키는 경우가 많다고 한다. 따라서 모듈 형식(변수와 함수가 모인 집합체)로 다른 모듈에서도 변수, 함수를 사용할 수 있는 방법을 제공한다.
- 현재는 javascript에서 공식적이며 표준적인 모듈이고 이미 swiper에서 구현한 모듈 자체를 불러오는 것
위와 같이 먼저 <head> 태그 내 swiper를 불러오면 된다.
2. swiper html layout 불러오기
▶swiper class 종류
"swiper-container" -> 말 그대로 용기, swiper를 담는 container이며 범위로 크기를 조정 가능하다.
"swiper-wrapper" -> 말 그래도 포장지처럼, container를 둘러싸고 있어서 실제로 slide가 보여지는 큰 판이다.
"swiper-slide" -> 각각의 slide이며, text를 넣을수도 있고 <div> 태그 등을 이용해서 이미지와 텍스트가 결합된 형태로도 구현이 가능하다.
"swiper-pagination" -> 각 page를 목차처럼 bullet 형태 등 다양한 모양으로 click하면 그 page로 이동할 수 있는 기능을 가진 class
"swiper-button-prev" -> prev 버튼을 이용해서 이전 페이지로 이동. (*버튼 모양을 바꾸고 싶으면 class 모양이 다르기 때문에 새롭게 class 명을 선언해야한다. 아랫 부분에서 다시 이야기 할 예정.)
"swiper-button-next" -> prev와 동일, 다음 페이지 이동
"swiper-scrollbar" -> page 이동시, scrollbar를 통해서 보여줌
- 이외에도 Swiper 홈페이지 API에서 다양한 속성과 기능들을 제공하고 있다. 해당 필요한 부분을 찾아보고 본인이 구현하려는 기능을 찾아오면 될 것 같다.
- 요새 웹언어 중 핫한 React뿐만 아니라 Vue.js, Angular 도 제공하고 있다. 다양하게 사용해보면 더욱 더 좋을 것 같다.
▶button custom 방법
1. <script>부분에 button class 새롭게 지정
*css 코드
.prev_button
{
width:25px;
height:25px;
background-img : url("../img/button.png");
background-size : cover;
background-position : center;
}
*script 코드
<script>
...
navigation: {
nextEl: '.next_button',
prevEl: '.prev_button',
},
</script>
2. 이후에 button을 삽입하고 싶은 위치에 div class = "[버튼명]"을 넣는다.
<div class="next_button"></div>
<div class="prev_button"></div>
'HTML' 카테고리의 다른 글
| web coding 기초 공부 (1) | 2021.04.04 |
|---|---|
| HTML, XHTML, HTML5 (0) | 2021.04.02 |
