💻 Carousel 슬라이드를 만들어보자!
모든 slider를
position: absolute
로 겹친뒤 선택한 slider만opacity: 1
로 보이게 만들고 원 버튼의 index 값을 받아 선택한 원 index와 slider index를 같게 만들기
<div class="content">
<div>
<div class="preBtn"></div>
<div class="slideBox">
<div class="slider active">1</div>
<div class="slider">2</div>
<div class="slider">3</div>
<div class="slider">4</div>
</div>
<div class="nextBtn"></div>
</div>
<div class="circleList">
<button class="circle active" value="0"></button>
<button class="circle" value="1"></button>
<button class="circle" value="2"></button>
<button class="circle" value="3"></button>
</div>
</div>
const sliderList = document.querySelectorAll('.slider');
const circlesBtn = document.querySelectorAll('.circle');
const nextBtn = document.querySelector('.nextBtn');
const preBtn = document.querySelector('.preBtn');
let current = 0;
function remove() {
sliderList[current].classList.remove('active');
circlesBtn[current].classList.remove('active');
}
function add() {
sliderList[current].classList.add('active');
circlesBtn[current].classList.add('active');
}
function next() {
remove();
current = current + 1 < 4 ? current + 1 : 0;
add();
}
nextBtn.addEventListener('click', next)
function pre() {
remove();
current = current - 1 >= 0 ? current - 1 : 3;
add();
}
preBtn.addEventListener('click', pre)
for (let i = 0; i < 4; i++) {
circlesBtn[i].addEventListener('click', function (e) {
let index = e.target.value;
current = index;
remove();
add();
});
}
원 버튼을 누른 다음 next나 pre 버튼을 눌렀을 때 그 다음 화면이 가야하는데 let current = 0
이라는 전역 변수 때문인지 새로고침하듯 첫 번째 슬라이드가 보여지게 된다. 시간 날 때 바꿔봐야겠다.
수정하고 싶은 부분을 수정한 뒤 우리 스터디 다음 과제인 숫자야구 틀을 구성하고 만들어 봐야겠다.