[JavaScript / jQuery] 캐러셀(이미지 슬라이드) 만들기

💡 실습 포인트!

• 오늘은 이미지 슬라이드를 만들어보았다.
• 화면 하단 가운데에 있는 동그라미 버튼 3개는 각 버튼을 눌렀을 때 해당하는 순서의 슬라이드로 이동시켜준다.
• 동그라미 버튼들 옆에 화살표는 이전, 다음 버튼으로 현재 슬라이드를 기준으로 이전 슬라이드나 다음 슬라이드로 이동시켜준다.
• 사실 동그라미 버튼 3개는 아래쪽에, 화살표 버튼은 슬라이드 양 끝에 넣고 싶었는데 position: absolute 도 z-index 를 이용해도 원하는 배치가 잘 나오지 않았고, 어찌어찌 나오면 반응형에서 예쁘게 배치되지 않았다. 그래도 굳이 만들려면 media query 를 사용해야 할 것 같은데... 다음번에 좀 더 공부해서 다시 도전해봐야 할 것 같다.

---

💜 HTML

<div style="overflow: hidden;">
    <div class="slide-container">
        <div class="slide-box">
            <img src="./img/car1.png">
        </div>
        <div class="slide-box">
            <img src="./img/car2.png">
        </div>
        <div class="slide-box">
            <img src="./img/car3.png">
        </div>
    </div>
    <div class="btns">
        <button class="angle-btn prev">
            <i class="fas fa-angle-left"></i>
        </button>
        <button class="dot-btn slide-1"> </button>
        <button class="dot-btn slide-2"> </button>
        <button class="dot-btn slide-3"> </button>
        <button class="angle-btn next">
            <i class="fas fa-angle-right"></i>
        </button>
    </div>
</div>

💜 CSS

.slide-container {
  width: 300vw;
  transition: all 1s;
}

.slide-box {
  width: 100vw;
  float: left;
}

.slide-box img {
  width: 100%;
}

.btns {
  display: inline-block; /* margin-collapse 해결 */
  width: 100%; /* margin-collapse 해결 */
  text-align: center;
  padding: 10px;
  z-index: 5;
  top: -70px;
  position: relative;
}

.angle-btn {
  background: transparent;
  border: none;
  font-size: 30px;
  color: gold;
}

.angle-btn:active {
  color: darkgoldenrod;
}

.prev {
  margin-right: 20px;
}

.next {
  margin-left: 20px;
}

.dot-btn {
  background: gold;
  border: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translate(0, -55%);
  margin: 0 5px;
}

.dot-btn:focus {
  background: darkgoldenrod;
}

• 일단 내가 보는 화면의 너비는 100vw 이고 슬라이드 이미지는 float 속성이 적용되어 총 3장이 가로로 놓인 상태이므로 전체 너비는 300vw 로 설정했다.
• 여기까지 하면 가로로 스크롤이 길게 생기는데 일단 스크롤 없이 첫 이미지만 보여야 하므로, overflow: hidden 속성을 이용해서 스크롤을 없앴다.
• 실습을 하다가 버튼 배치 과정 중에 margin-collapse 현상을 다시 마주했다. 
• 열심히 구글링한 결과 display: inline-block 으로 하고 width 를 100% 로 설정해주면 해결된대서 적용해보았다.

💜 JavaScript

var slide = 1;
$('.slide-1').on('click', function(){
    $('.slide-container').css('transform', 'translateX(0vw)');
    slide = 1;
})

$('.slide-2').on('click', function(){
    $('.slide-container').css('transform', 'translateX(-100vw)');
    slide = 2;
})

$('.slide-3').on('click', function(){
    $('.slide-container').css('transform', 'translateX(-200vw)');
    slide = 3;
})

$('.prev').on('click', function(){
    if (slide == 3){
        $('.slide-container').css('transform', 'translateX(-100vw)');
        slide = 2;
    } else if (slide == 2){
        $('.slide-container').css('transform', 'translateX(-0vw)');
        slide = 1;
    }
})

$('.next').on('click', function(){
    if (slide == 1){
        $('.slide-container').css('transform', 'translateX(-100vw)');
        slide = 2;
    } else if (slide == 2){
        $('.slide-container').css('transform', 'translateX(-200vw)');
        slide = 3;
    }
})

• 슬라이드를 버튼으로 조작하여 움직이려면 현재 내가 보는 슬라이드가 몇 번째인지 기준이 필요하다.
• 우선 첫 이미지를 1번으로 정하고, 두번째 동그라미 버튼을 클릭했을 때 2번 슬라이드로, 세번째 동그라미 버튼을 클릭했을 때 3번 슬라이드로 갈 수 있게 해주었다.
• 슬라이드를 옮긴 후에는 현재 내가 보는 슬라이드가 바뀌는 것이므로, 해당하는 슬라이드 번호를 지정해주었다.
• 이전, 다음 버튼의 경우 내가 특정 슬라이드에서 이전 버튼을 누르면 어떤 슬라이드가 나오고, 다음 버튼을 누르면 어떤 슬라이드가 나오는지 위치를 잡아주고, 해당 위치의 슬라이드 번호를 지정해주었다.