자바스크립트 Swiper를 이용한 스와이프뷰 간단하게 만들어보기
안드로이드 개발을 공부하고 있지만, 회사가 이 기능을 원한다는데...
어찌하리 한번 공부해보고 올려본다.
우선 Swiper라는 사이트로 들어가 보자.
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
그 후에 Get Started 버튼을 들어가 보자.
나 같은 경우는 다운로드가 아닌 간단하게
CDN을 이용할 것이다.
이런 식으로 CDN 부분만 보면 된다.
여기에서 min 붙은 파일을 head사이에 넣어준다.
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>이런 식으로 말이다.
그 후에는 내가 원하는 기능을 찾아봐야 할 것이다.
다시 Swiper 사이트로 들어가 Demos로 들어간다.
그러면 스와이프에 여러 가지 기능이 있는데 원하는 기능을 선택하고 사용하면 된다.
나 같은 경우는 양 쪽에 화살표가 있는 기능을 사용하려고 한다.
원하는 기능을 찾았다면, 위에 소스코드라고 써져있는 글씨를
클릭하고, 깃허브로 들어가 보자.
그러면 여러 소스들이 있을 텐데 그 코드들을 활용하면 된다.
우선 style파일 들고 가져왔다.
<style>
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
</style>
선택자의 이름은 같아야 하니
이름을 바꿔도 되지만,
잘 바꾸길 바란다.
이제 body태그 안에 다음과 같은 div태그를 넣어보자.
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
저 Slide 글씨 안에 그림을 넣어도 되고,
여러 가지 글을 넣어도 된다.
아래 swiper-button은 뒤로 가기와 앞으로 넘기기이다.
이제 이 기능들을 실행해주기 위한 스크립트 코드를 넣어주자.
body태그 안에 다음과 같은 스크립트 코드를 넣어준다.
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
아래는 전체 코드이다.
<!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.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<style>
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
</body>
</html>
이런 식으로 코드를 써주면
아래와 같이 실행이 된다.
혹시 몰라
코드도 올려두겠다.
'Programing > JavaScript' 카테고리의 다른 글
| JavaScript / document.getElementById와 className (0) | 2021.01.06 |
|---|---|
| JavaScript/getElementById와 value (0) | 2021.01.05 |
| JavaScript 버튼만들기와 prompt로 경고창 만들기 (0) | 2020.12.30 |
| JavaScript란/자바스크립트란? (0) | 2020.12.29 |
