좌/우 슬라이드 컨트롤 버튼과
슬라이드 개수처리
너비 처리 부분입니다.
첨부파일 받아 보시면 태그와 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();