html
<div class="carousel" style="overflow: hidden; position: relative;">
<div class="slide-container">
<div class="slide-box"></div>
<div class="slide-box"></div>
<div class="slide-box"></div>
<div class="slide-box"></div>
<div class="slide-box"></div>
</div>
<button class="before"><</button>
<button class="next">></button>
</div>
<div class="slide-pager" style="margin-bottom: 50px; text-align: center;">
</div>
JS
function carousel() {
var viewSlide = 0;
var slideLength = $('.slide-container .slide-box').length;
//슬라이드 추가 할 때마다 .slide-container 너비 확장
$('.slide-container').css('width', slideLength+'00vw');
//슬라이드 수 만큼 페이저 버튼 생성
for(let i = 0; i < slideLength; i++) {
$('.slide-pager').append('<button>'+ (i+1) +'</button>');
}
//페이저버튼 클릭시 해당 슬라이드로 이동
$('.slide-pager button').click(function(){
var pgIndex = $(this).index();
$('.slide-container').css('transform', 'translateX(-'+ pgIndex +'00vw)');
viewSlide = pgIndex;
});
$('.next').click(function(){
if(viewSlide < (slideLength - 1)) {
$('.slide-container').css('transform', 'translateX(-' + (viewSlide + 1) + '00vw)');
viewSlide += 1;
}
});
$('.before').click(function(){
if(viewSlide > 0) {
$('.slide-container').css('transform', 'translateX(-' + (viewSlide - 1) + '00vw)');
viewSlide -= 1;
}
console.log(viewSlide);
});
}
carousel();
입니다.
혹시 더욱 깔끔하게 할 수 있다면 피드백 부탁드립니다 🙂
