브라우저 제목

좌/우 슬라이드 컨트롤 버튼과 

슬라이드 개수처리

너비 처리 부분입니다.

첨부파일 받아 보시면 태그와  css와 js 가 있습니다.

 

슬라이드 좌/우 컨트롤 버튼과 슬라드의 개수 및 너비 처리

 

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>

 

css

 

.side-nav{

display:none;

}

.side-content{

width:100%;

}

 

.slider-wrap{

width:100%;

position:relative;

overflow:hidden;

}

.slides{

width:300%;

position:relative;

}

.slides>li{

width:33.33%;

float:left;

list-style:none;

}

.pbt,.nbt{

width:50px;

height:50px;

background:white;

position:absolute;

z-index:999;

top:40%;

}

.pbt{

left:20px;

}

.nbt{

right:20px;

}

 

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

}

 

function prevPlay(){

if( num<=0 ){

num=$li_length-1;

}else{

num--;

}

slideMove();

};

 

function slideMove(){

$(".slides").stop().animate({

left:-num*s_width

});

}

 

$(".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
태그 목록