브라우저 제목

샘플) 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();

 

 

제목 날짜
포트폴리오 샘플 2020.05.21
데스크탑, 모바일 구분 접속 2019.02.11
터치이벤트, pc환경과 모바일 환경 알아내기 file 2020.05.04
코르도바 를 설정하기 위한 방법 file 2020.04.26
sticky position file 2020.04.22
webfont file 2020.04.21
video file 2020.04.15
audio2 file 2020.04.15
audio 2020.04.11
wheel이벤트3 file 2020.04.11
wheel이벤트2 file 2020.04.11
wheel이벤트1 file 2020.04.11
드레그 앤 드롭 효과 예제 file 2020.04.03
드레그 앤 드롭 효과 원리 file 2020.04.03
슬라이드 페이지 네이션 file 2020.04.02
좌/우 슬라이드 슬라이드 개수처리, 너비 처리 file 2020.04.02
모바일 작업 file 2020.04.02
자격증 슬라이드 기본 2020.03.30
스크롤바 없에는 css 2020.03.30
터지이벤트와 mouseup, mousedown이벤트 2020.03.28
태그 목록