샘플) http://comlearn.co.kr/project1/mobile1/layout.html
슬라이드에서 페이지네이션 부분입니다.
첨부파일에서 확인하세요
pagenation
html
<div class="slider-wrap">
<ul class="slides">
<li ><img src="images/slide1.jpg"></li>
<li ><img src="images/slide2.jpg"></li>
<li ><img src="images/slide3.jpg"></li>
<li ><img src="images/slide3.jpg"></li>
</ul>
<button class="pbt">이전</button>
<button class="nbt">다음</button>
<div class="pagenation">
<ul>
<li><a href="#">1번</a></li>
<li><a href="#">2번</a></li>
<li><a href="#">3번</a></li>
<li><a href="#">4번</a></li>
</ul>
</div>
</div>
css
/* 페이지네이션 */
.pagenation{
clear:both;
width:100%;
padding:10px 0;
}
.pagenation ul{
width:100%;
display:flex;
justify-content: center;
}
.pagenation ul li{
display:inline-block;
margin:0 10px;
}
.pagenation ul li a{
display:flex;
justify-content: center;
align-items: center;
width:30px;
height:30px;
border-radius:15px;
background:black;
color:white;
}
js
// 슬라이드
var num=0;
var $li_length=$(".slides>li").length;
console.log("li의 개수"+$li_length);
var s_width=$(".slider-wrap").width();
console.log("슬라이드의 너비"+s_width);
var full_width=s_width*$li_length;
console.log("슬라이드의 전체 너비 : "+full_width);
$(".slides").css({
width:full_width
});
$(".slides>li").css({
width:s_width
});
function nextPlay(){
if( num>=$li_length-1 ){
num=0;
}else{
num++;
}
slideMove();
pagenation();
}
function prevPlay(){
if( num<=0 ){
num=$li_length-1;
}else{
num--;
}
slideMove();
pagenation();
};
function slideMove(){
$(".slides").stop().animate({
left:-num*s_width
});
}
function pagenation(){
$(".pagenation>ul>li>").each(function(index){
console.log(index);
$(this).click(function(){
$(".slides").stop().animate({
left:-index*s_width
});
num=index;
return false;
});
});
}
$(".pbt").click(function(){
prevPlay();
});
$(".nbt").click(function(){
nextPlay();
});
function autoPlay(){
setInterval(function(){
nextPlay();
},5000);
}
autoPlay();