[WeCode] 사전스터디 3주차

UlongChaS2·2021년 5월 12일
0

WeCode

목록 보기
3/17
post-thumbnail

3week goal

💻 Carousel 슬라이드를 만들어보자!

1. JavaScript 틀을 구상하기

모든 slider를 position: absolute로 겹친뒤 선택한 slider만 opacity: 1로 보이게 만들고 원 버튼의 index 값을 받아 선택한 원 index와 slider index를 같게 만들기

2. HTML

<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>

3. JavaScript

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이라는 전역 변수 때문인지 새로고침하듯 첫 번째 슬라이드가 보여지게 된다. 시간 날 때 바꿔봐야겠다.


다음 계획

수정하고 싶은 부분을 수정한 뒤 우리 스터디 다음 과제인 숫자야구 틀을 구성하고 만들어 봐야겠다.

0개의 댓글