JS - 슬라이드

연습/JS

JS - 슬라이드

hyeon1016 2024. 8. 26. 01:21

JavaScript를 사용해 슬라이드를 만들어보자.

우선 HTML이다.

<body>
  <div class="sliderBox">
    <div class="sliders">
      <ul id="slide">
        <li><img src="./견과.jfif" alt="#"></li>
        <li><img src="./고기.jfif" alt="#"></li>
        <li><img src="./과일 주스.jfif" alt="#"></li>
      </ul>
      <div>
        <p id="left">왼쪽</p>
        <p id="right">오른쪽</p>
      </div>
    </div>
  </div>
  <script src="./slide.js"></script>
</body>

첫 번째 <div>는 배경색을 입히는 용도로 사용하려고 사용했다.

두 번째 <div>는 슬라이더 영역과 버튼의 위치를 조정하기 위해 사용했다.

<ul>은 슬라이드인 <li>를 하나로 묶는 역할을 한다.

<li>는 화면상 보이는 슬라이드의 역할을 한다.

<p> 두 개는 각각 왼쪽 오른쪽 버튼의 역할을 한다. <label>의 역할을 한다 생각하면 된다.

마지막 <script>는 html이 로딩된 후에 JavaScript를 적용하기 위함이다.

CSS

* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
  text-decoration: none;
  transition: all 0.5s;
}

.sliderBox {
  border: 2px solid black;
  width: 100%;
  background-color: rgb(209, 199, 199);
}

.sliders {
  width: 70%;
  margin: 0 auto;
  border: 2px solid blue;
  position: relative;
}

#slide {
  width: 50%;
  margin: 0 auto;
  border: solid yellow;
  font-size: 0;
  white-space: nowrap;
  overflow: hidden;
}

#slide li{
  width: 100%;
  border: 2px solid red;
  display: inline-block;
}

li img {
  width: 100%;
}

#left {
  padding: 18px 13px;
  border: 2px solid red;
  border-radius: 50%;
  position: absolute;
  top: 45%;
  left: 15%;
}

#right {
  padding: 18px 5px;
  border: 2px solid red;
  border-radius: 50%;
  position: absolute;
  top: 45%;
  right: 15%;
}

실질적인 기능은 JavaScript에서 작성하기 때문에 기능적인 부분은 많이 없고 외형 변화가 대부분이다.

우선 css를 초기화했다. 겸사겸사 모든 요소에 'transition'도 넣어줬다. 슬라이드가 부드럽게 움직이게 된다.

'. sliderBox'는 부모요소의 가로나비 전부 사용하고, 배경색과 구분을 위한 테두리를 추가했다.

'. sliders'는 부모요소의 가로나비 70%를 사용하고 'margin'을 사용해 가운데로 정렬한다. 동일하게 테두리를 지정해 주었고, 'positon:relative;'를 설정해서 기준이 되게 한다.

'#slide'는 슬라이드가 움직이는 컨테이너다. 가로나비는 부모요소의 50%를 사용하고 'margin'을 사용해 중앙 정렬한다.

이어서 'white-space:nowrap;'을 사용해 '#slide'의 자식요소가 '#slide'의 영역을 넘어갈 수 있게 한다. 영역을 넘어간 부분은 'overflow hidden'을 사용해 숨긴다.

'#slide'의 자손 'li'에 'display: inline-block'을 사용한다. '#slide'에 'white-space:nowrap;'을 사용했기 때문에 부모 영역을 넘어 가로로 정렬된다.

'img'의 너비를 부모 요소의 100%로 지정했다.

슬라이드 버튼의 역할을 하는 '#left', '#right'의 외형을 꾸며주고, 'position: absolute'를 사용해 위치를 지정해 주었다.

JS

//1. 생성

// label 버튼 생성
let left = document.querySelector("#left");
// console.log(left);
let right = document.querySelector("#right");
// console.log(right);

//slide_lis 생성
let slide_lis = document.querySelectorAll("#slide > li");
// console.log(slide_lis);

//index 값초기화
let index = 0; 

//2. 버튼 이벤트

left.addEventListener("click", leftBtn);
right.addEventListener("click", rightBtn);

//3. 함수 생성

function leftBtn() {
  // alert("left 호출 테스트");
  index--; //인덱스 값 감소
  if(index < 0) {
    index = slide_lis.length-1;
  }
  slideControl(index);
}

function rightBtn() {
  // alert("right 호출 테스트");
  index++;
  if(index >= slide_lis.length) {
    index = 0;
  }
  slideControl(index);
}

function slideControl(index) {
  console.log(index);
  //inline block을 li에 적용했기 때문에 각각의 li요소를 translate 시키기 위해 for문 사용 
  for(let i=0; i<slide_lis.length; i++)
  {
    slide_lis[i].style.transform = `translateX(-${index*100}%)`;
  }
}

우선 사용할 변수를 생성했다.

슬라이드 버튼인 '#left'와 '#right'를 불러와 각각 변수 'left', 'right'에 저장했다. 이 변수들은 label의 역할을 할 것이다.

다음으로 '#slide'의 자식 요소 'li'를 모두 불러와 변수 'slide_lis'에 저장했다. 이 변수는 여러 요소를 포함하는 'NodeList'다. 'NodeList'는 'document.querySelectorAll()'과 같은 메서드로 여러 노드를 선택할 때 반환되며, 배열과 비슷하게 인덱스를 통해 요소에 접근할 수 있지만 정확히 배열은 아니다.

'slide_lis'의 길이를 나타내는 변수 'index'의 값을 0으로 초기화한다.

다음으로 이벤트를 생성했다.

버튼 'left'와 'right'를 클릭했을 때 각각 'leftBtn()', 'rightBtn()' 함수가 생성된다.

마지막으로 함수를 생성했다.

우선 'leftBtn()' 함수에 대해 설명하겠다.

이벤트에 의해 이 함수가 호출되었을 때 'index'의 값이 1 감소한다. 이때 조건문 if로 'index'의 값이 0보다 작아졌다면 'index'의 값은 'slide_lis'의 길이에서 1을 뺀 값이 된다. 인덱스는 0부터 시작하는 반면 'length'는 1부터 시작하기 때문에 1을 빼준 것이다.

계산된 'index'값을 함수 'slideControl'에 넘긴다.

다음으로 'rightBtn()'함수다.

이벤트에 의해 이 함수가 호출되었을 때 'index'의 값이 1 증가한다. 이때 조건문 if로 'index'의 값이 'slide_lis'의 길이보다 크거나 같다면 'index'의 값은 0이 된다.

계산된 'index'값을 함수 'slideControl()'에 넘긴다.

마지막으로 함수 'slideControl()'이다.

'console.log()'를 사용해 'index'의 값이 제대로 계산되어 넘어오는지 확인한다.

이후 반복문 for을 사용해 변수 'i'를 생성하고 초기값을 0으로 한다. 이 반복문은 변수 'i'가 'slide_lis'의 길이보다 작을 때 반복된다. 반복되며 'i'는 1씩 커진다.

해당 반복문에 "slide_lis [i]. style.transform = `translateX(-${index*100}%)`;"를 작성해 'slide_lis'의 모든 'li'를 X축 기준으로 '-('index' * 100)%'만큼 움직인다.

반복문을 사용하는 이유는 'li' 요소에 'inline-block'을 적용했기 때문에 각 요소를 개별적으로 이동시키기 위함이다.