https://github.com/nolimits4web/Swiper/blob/master/demos/200-infinite-loop.html 에서 코드를 받아와서 슬라이더 기능을 구현했다!
nolimits4web/swiper
Most modern mobile touch slider with hardware accelerated transitions - nolimits4web/swiper
github.com
cdn기능은 정말 쓸 때마다 놀랍다. 단 코드 두줄로 해당 기능 구현에 필요한 코드들을 싹다 가져올 수 있다는 것이 신기했다. 아무튼.. 현재 진행중인 프로젝트의 posting 페이지에서 해당 기능의 구현이 필요해져서 찾던 중에 아주 괜찮은 라이브러리를 발견했다.
https://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
Demos에 들어가보면 실제로 다양한 웹페이지에서 접해본 유형의 slider들이 존재한다. 그중에서 우리가 필요했던 것에 딱 맞는 게 있어서 가져왔다.
기본적으로 제공받은 건 슬라이더밖에 없다. 그래서 add버튼을 통해 필요에 따라 슬라이드가 더 추가되게끔 만들었다.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../package/swiper-bundle.min.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
</head>
<body>
<div id='background'>
<!-- Swiper -->
<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>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div id='add-swiper-button'><button>add</button></div>
</div>
</div>
</body>
</html>
CSS
html,
body {
position: relative;
height: 100%;
overflow: hidden;
}
body {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
#background {
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('images/img2.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
}
.swiper-container {
width: 50%;
height: 70%;
padding-top: 120px;
padding-bottom: 120px;
margin-left: auto;
margin-right: auto;
}
.swiper-pagination {
margin-bottom: 120px;
}
.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;
}
JavaScript
var appendNumber = 4; // 기존 슬라이드 개수
var swiper = new Swiper('.swiper-container', {
slidesPerView: 1,
spaceBetween: 30,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
// add버튼을 눌렀을 때 슬라이드를 추가하는 함수
document.querySelector('#add-swiper-button').addEventListener('click', function (e) {
e.preventDefault();
swiper.appendSlide('<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>');
});
이미지가(img1.jpg) 없지만, 추가만 해주면 똑같이 구현될 것이다.
'today i learned' 카테고리의 다른 글
| today i learned 9/1 (0) | 2020.09.02 |
|---|---|
| today i learned 8/31 (0) | 2020.09.01 |
| today i learned 8/29 (0) | 2020.08.30 |
| today i learned 8/28 (0) | 2020.08.29 |
| today i learned 8/27 VanillaJS를 이용한 해시태그 기능 추가 (0) | 2020.08.27 |
