상세 컨텐츠

본문 제목

Swiper slider 페이지번호 (current page number), html 슬라이더

IT공부방/jQuery, ajax, java

by 동해둘리 2019. 3. 2. 17:35

본문

반응형

 

Swiper Slider 라는 것이 있습니다. HTML 문서내에서 상하/좌우 슬라이딩 기능을 제공해주는 슬라이더 API 인데요

 

아래 사이트에 가면 자세한 사항을 보실 수 있습니다

https://idangero.us/swiper/

 

 

 

 

 

아래와 같이 페이지 넘버링이 지원되는 형식도 있구요

 

 

 

 

 

블릿형태로 제공되는 방식도 있고,

 

 

 

 

아래와 같이 상하로 스크롤되는 방식도 있습니다

 

 

 

 

그리고 아래 것은, 스크롤바가 움지이는 방식입니다

 

 

 

 

 

기본적으로 swiper slider 를 사용하려면 아래와 같의 하면 됩니다

 

 

우선, css 파일을 넣어주고

 

<link rel="stylesheet" href="./css/swiper.min.css">

 

js 파일도 넣어주고

 

<script src="./js/swiper.min.js"></script>

 

 

화면에 보여질 부부은 다음과 같이 세팅합니다

 

<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 Pagination -->
<div class="swiper-pagination"></div>
</div>
<div id = "page_number">1</div>
 

 

 

 

그리고, 아래와 같이 swiper 객체를 생성시켜 주면됩니다

 

var swiper = new Swiper('.swiper-container');

 

 

 

객체를 생성할때 여러가지 옵션을 줄 수가 있는데요, 아래와 같이 page navigation 을 적용하면, 슬라이더 하단에 숫자로 표기되는 블릿이 나타납니다

 

var mySwiper = new Swiper('.swiper-container',{
pagination: {
el: '.swiper-pagination',
clickable: true,
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + '</span>';
},
},
})
 

 

 

이러한 슬라이딩 기능을 swiper slider 를 이용하여 구현할 경우, 현재 swiper slider 페이지번호 값을 읽어올 필요가 있는데요, 이때는 slideChangeTransitionEnd  이벤트를 사용하면 됩니다

 

var mySwiper = new Swiper('.swiper-container',{
on: {
slideChangeTransitionEnd: function(){
alert(this.activeIndex); // this.activeIndex 에 현재 슬라이드 번호가 들어있습니다
},
},
})

 

 

 

숫자로 표기되는 블릿과 현제 슬라이드 번호를 알아내는 전체소스는 다음과 같습니다

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="euc-kr">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="./css/swiper.min.css">

<!-- Demo styles -->
<style>
html, body {
position: relative;
height: 80%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.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;
}
.swiper-pagination-bullet {
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
font-size: 12px;
color:#000;
opacity: 1;
background: rgba(0,0,0,0.2);
}
.swiper-pagination-bullet-active {
color:#fff;
background: #007aff;
}
</style>
</head>
<body>
<!-- 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 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 Pagination -->
<div class="swiper-pagination"></div>
</div>
<div id = "page_number">1</div>
<!-- Swiper JS -->
<script src="./js/swiper.min.js"></script>
<script src="./js/jquery.js"></script>
<script language = "javascript">
function SetPageNumber(nPageNumber)
{
document.getElementById("page_number").innerHTML = nPageNumber;
}
</script>

<!-- Initialize Swiper -->
<script>
$(document).ready(function () {

var mySwiper = new Swiper('.swiper-container',{
pagination: {
el: '.swiper-pagination',
clickable: true,
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + '</span>';
},
},
on: {
slideChangeTransitionEnd: function(){
//alert(this.activeIndex);
SetPageNumber(this.activeIndex+1);
},
},
})
 
});

</script>
</body>
</html>
 

 

참고로 저 동해둘리가 직접 운영하는 '성공하는 중이다'  카페를 소개드립니다. 

각자의 분야에서 성공을 향해 가는 과정에서 힘이되는 이야기, 힘이되는 사진, 성공스토리, 실패스토리 등을 나누고자 합니다. 많은 참여 부탁드려요

 

https://cafe.naver.com/ingsuccess

 

성공하는 중이다 : 네이버 카페

성공을 위해 실패를 두려워하지 않는 분들의 이야기를 나누고 싶습니다. 우리는 성공하는 중이니까요!

cafe.naver.com

 

*  참고사이트

http://caibaojian.com/swiper-api/event/92.html

https://idangero.us/swiper/api/#events

https://idangero.us/swiper/demos/

 

 

반응형
저작자표시

'IT공부방 > jQuery, ajax, java' 카테고리의 다른 글

video progressbar disable, Video 태그 진행바 클릭안되게 하기  (0) 2019.03.06
이미지 슬라이드 예제 swiper slider sample / 현재페이지 번호까지  (1) 2019.03.03
javascript 클립보드 복사하기 clipboard copy  (6) 2019.01.14
일정시간 간격으로 이미지 변환,전환 시키기 javascript setTimeout, setInterval, clearTimeout  (3) 2018.12.13
인트로페이지 로딩 , 부드럽게 열리는 이미지 만들기 jquery  (0) 2018.10.30

관련글 더보기

댓글 영역

티스토리툴바