[Javascript] 캐러셀 슬라이더 2가지 예제

1. 심플한 오버레이 슬라이더

 

 

▶[강의영상] 바닐라 자바스크립트로 "캐러셀 슬라이더" 만들기 (Vanilla JS : making Carousel slider)

 

화면전환에 중점을 둔 기본 형태이다. 방향 화살표나 페이징 기능은 없지만 <div>안에 이미지나 컨텐츠를 풍부하게 넣으면 꽤 쓸만한 캐러셀이 될 것 같다. 또는 원페이지 디자인에서 백그라운드 요소로 활용해도 좋을 것 같다.

 

 

1) HTML & CSS

<style>
#slider{
  width: 100%;
  position:relative;
}
.slider__item{
  width: 100%;
  height: 450px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 48px;
  position:absolute;
  z-index:0;
  opacity:0;
  transition: all 1s ease-in-out;
}
.slider__item:nth-child(odd){
  background-color:royalblue;
}
.slider__item:nth-child(even){
  background-color:blueviolet;
}
.showing{
  z-index:1;
  opacity:1;
}
</style>

<div id="slider">
    <div class="slider__item"><p>1</p></div>
    <div class="slider__item"><p>2</p></div>
    <div class="slider__item"><p>3</p></div>
    <div class="slider__item"><p>4</p></div>
    <div class="slider__item"><p>5</p></div>
</div>

 

2) Javascript

const SHOWING_CLASS = "showing";
const firstSlide = document.querySelector(".slider__item:first-child");

function slide(){

  const currentSlide = document.querySelector(`.${SHOWING_CLASS}`);

  if (currentSlide) { // 만약 현재 슬라이드라면
    currentSlide.classList.remove(SHOWING_CLASS); // 현재 슬라이드에서 SHOWING_CLASS를 제거한다
    const nextSlide = currentSlide.nextElementSibling; // 다음 슬라이드를 정의한다.

    if (nextSlide) { //만약 다음 슬라이드가 있다면
      nextSlide.classList.add(SHOWING_CLASS); //다음 슬라이드에 SHOWING_CLASS를 붙인다.
    } else { // 다음 슬라이드가 없다면 =>  5번째 슬라이드라면(마지막 슬라이드라면)
      firstSlide.classList.add(SHOWING_CLASS); // 첫번째 슬라이드에 SHOWING_CLASS를 붙인다.
    }

  } else {
    firstSlide.classList.add(SHOWING_CLASS);
  }
}

slide();
setInterval(slide, 2000);

초보자의 공부법 공개(!).

코드도 결국 영어로 된 언어이다보니 영문장 독해하듯 한국어로 써보면 이해하는데 도움이 된다.

 

 

---

 

2. 좌우이동 버튼이 있는 슬라이더

 

▶[강의영상] How To Create An Image Slider In HTML, CSS & Javascript

 

좌우에 이동 화살표키가 있어서 사용자 마음대로 앞뒤로 왔다갔다 할 수 있다. 가장 보편적으로 쓰이는 형식의 슬라이더이다.

 

 

1) HTML & CSS

<style>
.carousel-container{
  width: 900px;
  margin: 30px auto;
  border: 0px solid #000;
  overflow: hidden;
  position: relative;
}
.carousel-slide{
  display: flex;
  width: 100%;
  height: 450px;
}
#prevBtn{
  position:absolute;
  top: 50%;
  left: 0;
  transform: translate(0%, -50%);
  width: 20px;
  height: 36px;
  background: url(img/carousel_prevBtn.png) no-repeat;
  text-indent: -9999px;
}
#nextBtn{
  position:absolute;
  top: 50%;
  right: 0;
  transform: translate(0%, -50%);
  width: 20px;
  height: 36px;
  background: url(img/carousel_nextBtn.png) no-repeat;
  text-indent: -9999px;
}
</style>

<div class="carousel-container">
  <div class="carousel-slide">
    <img src="img/slide5.jpg" id="lastClone">
    <img src="img/slide1.jpg">
    <img src="img/slide2.jpg">
    <img src="img/slide3.jpg">
    <img src="img/slide4.jpg">
    <img src="img/slide5.jpg">
    <img src="img/slide1.jpg" id="firstClone">
  </div>
  <button id="prevBtn">Prev</button>
  <button id="nextBtn">Next</button>
</div>

 

 

2) Javascript

const carouselSlide = document.querySelector('.carousel-slide');
const carouselImages = document.querySelectorAll('.carousel-slide img');

const prevBtn = document.querySelector('#prevBtn');
const nextBtn = document.querySelector('#nextBtn');

let counter = 1;
const size = carouselImages[0].clientWidth;
carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';

// Buttons
nextBtn.addEventListener('click', ()=> {
  if(counter >= carouselImages.length -1) return;
  carouselSlide.style.transition = "transform 0.4s ease-in-out";
  counter++;
  carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
});

prevBtn.addEventListener('click', ()=> {
  if(counter <= 0) return;
  carouselSlide.style.transition = "transform 0.4s ease-in-out";
  counter--;
  carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
});

// Jump to First/Last Slide
carouselSlide.addEventListener('transitionend', () => {
  console.log(carouselImages[counter]);
  if (carouselImages[counter].id === 'lastClone'){
    carouselSlide.style.transition = 'none'; // 트랜지션 효과 없애기
    counter = carouselImages.length -2; // couter 초기화
    carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)'; // 실제 마지막 이미지로 이동.
  } else if (carouselImages[counter].id === 'firstClone') {
    carouselSlide.style.transition = 'none';
    counter = carouselImages.length - counter; // couter 초기화
    carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
  }
});

음. 코드는 장황하지만 이 예제의 포인트는 counter 변수의 흐름을 이해하는 것이다.counter 값이 언제 어떻게 변하는지 그 변천을 잘 따라가는 것이 중요하다.

 

 

 

▶한가지 버그

const size = carouselImages[0].clientWidth; // 이미지 가로크기 900px

이게 작동하지 않을 때가 있다. clientWidth는 엘리먼트의 가로 사이즈를 구하는 메소드인데 여기서는 슬라이드 1장의 이동거리로 쓰인다. 콘솔을 찍어봤는데 900이 제대로 찍힌다. 하지만 size 변수를 호출하면 0이 반환된다. 미치고 환장할 노릇...

 

구글링을 해보니 엘리먼트의 크기를 구하는 프로퍼티들은 inline 요소는 0을 반환한다고 한다. carouselImages 배열이 <img>로만 마크업 되어 있기 때문에 크기를 잡지 못하는 문제인 것 같다. 하지만 인터넷에 있는 다른 캐러셀 예제는 img 태그만 써도 잘만 되던데. 결국 이 문제를 풀지 못하고 상수 값을 넣었다. 어쨌든 돌아가기만 하면 되지 뭐.

 

 이 문제는 아직도 풀지 못했다. 푸신 분 제보 좀 부탁해요.