브라우저 제목

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

슬라이드 개수처리

너비 처리 부분입니다.

첨부파일 받아 보시면 태그와  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();

제목 날짜
태그 목록