순수 자바스크립트로 자동 캐러셀 슬라이드 만들기 예제와 방법 강좌

 쇼핑몰에서 대중적으로 사용되는 것은 슬라이드입니다.

 슬라이드는 독자의 시선을 끌어오는 역할과 함께 돋보이고 싶은 글을 읽을 수 있게 해주는 역할을 합니다.

 

 의외로 슬라이드 구현은 매우 간단합니다.

 이번 시간에는 순수 자바스크립트로 이 캐러셀 슬라이드를 만들어보겠습니다.

 아래의 사진은 미리 보는 완성품입니다.

 디자인이 되어 있지 않아서 투박하지만 자동 슬라이드 기능+버튼 클릭시 다음/이전으로 이동하는 기능이 잘 작동하는 것을 볼 수 있습니다.

 

 심플한 코드를 짠 것이기 때문에 속도와 유지보수면에서 편할 거라고 생각합니다.

 방법도 쉽기 때문에 사용하실 홈페이지/블로그 같은 곳에 적용하기도 쉬우실 겁니다. 굳이 복잡한 플러그인을 사용할 필요가 없습니다!

 

기본적인 원리와 구조 잡기

 

 원리는 간단합니다.

 

기본적인 원리

 캐러셀로 보여줄 화면을 정합니다.

 그 화면에 슬라이드의 아이템들을 absolute를 이용해서 여러겹으로 겹쳐 둡니다.

 그리고 모든 아이템의 투명도를 0으로 바꿔서 보이지 않게 합니다.

 

 처음 보여줄 아이템을 자바스크립트로 투명도를 1로 바꿔서 보이게 해줍니다.

 그리고 일정 시간마다 현재의 투명도를 0으로 되돌리고, 다음 아이템을 투명도 1로 바꿔줍니다.

 

 그게 전부입니다.

 매우 간단한 원리죠.

 

구조 잡기

 

 먼저 HTML과 CSS로 뼈대를 잡아야 합니다.

 필요한 요소는 이렇습니다.

 

• 전체 슬라이드를 감쌀 뼈대
• 슬라이드 아이템을 감쌀 뼈대
• 슬라이드 아이템들
• 좌,우로 이동할 수 있는 버튼들
• 썸네일(미리보고 이미지)를 감쌀 뼈대
• 썸네일 아이템들

 

 저 같은 경우 예제를 위해 가로 길이 600px, 세로 길이 300px의 슬라이드를 만들어보겠습니다.

 우선 HTML은 이렇게 작업했습니다.

 

<div class="content"> <!--전체를 감쌀 뼈대-->
<div class="slides">  <!--슬라이드 아이템을 감쌀 뼈대-->
  <div class="slide_item"></div>  <!--슬라이드될 아이템들 -->
  <div class="slide_item"></div>
  <div class="slide_item"></div>
  <div class="slide_item"></div>
  <div class="slide_item"></div>
  <div class="slide_item"></div>
</div>
<span class="nextButton">▶</span>  <!--다음 버튼 -->
<span class="prevButton">◀</span>   <!--이전 버튼 -->
  <div class="Thumbnail">  <!--썸네일을 감쌀 뼈대 -->
 <div class="thumbnail_item"></div>   <!--썸네일 아이템들 -->
  <div class="thumbnail_item"></div>
  <div class="thumbnail_item"></div>
  <div class="thumbnail_item"></div>
  <div class="thumbnail_item"></div>
  <div class="thumbnail_item"></div>
  </div> 
</div>

 

 그리고 CSS는 이렇게 작업했습니다.

 

.content{ /*컨텐츠 넓이지정*/
  position:relative;
  width:600px;
}
.slides { /*슬라이드 아이템이 나올 뼈대 지정*/
  width:600px;
  height:300px;
  position:relative;

}
.slide_item { /*슬라이드 아이템을 absolute로 겹쳐놓고 투명하게 하기*/
  position:absolute;
  width:600px;
  height:300px;
  opacity:0;
   transition:all 0.3s;
}
.ontheSlide { /*현재 아이템에 붙여줄 클래스*/
  opacity:1;
  transition:all 0.3s;
}
.ontheThumbnail { /*현재 썸네일에 붙여줄 클래스*/
  border: 1px dashed red;
}
.nextButton,.prevButton { /*다음,이전 버튼을 드래그되지 않게 방지해주기*/
 -webkit-user-select: none;
	-ms-user-select: none;
	user-select: none
}
.nextButton { /*다음 버튼을 오른쪽으로 보내기*/
  float:right;
}
.prevButton{ /*왼쪽 버튼을 왼쪽으로 보내기*/
  float:left;
}
.Thumbnail { /*썸네일 아이템을 감쌀 뼈대*/
  display:flex;
  flex-flow:row wrap;
  width:100%;
  height:50px;
  position:absolute;
  bottom:0px;
  justify-content:center;
}
.slide_item:nth-of-type(1),.thumbnail_item:nth-of-type(1) { /*예제를 위해 썸네일 아이템들의 색깔을 구분*/
  background:yellow;
}
.slide_item:nth-of-type(2),.thumbnail_item:nth-of-type(2) {
  background:blue;
}
.slide_item:nth-of-type(3),.thumbnail_item:nth-of-type(3) {
  background:red;
}
.slide_item:nth-of-type(4),.thumbnail_item:nth-of-type(4) {
  background:orange;
}
.slide_item:nth-of-type(5),.thumbnail_item:nth-of-type(5) {
  background:black;
}
.slide_item:nth-of-type(6),.thumbnail_item:nth-of-type(6) {
  background:green;
}
.thumbnail_item { /*썸네일 아이템의 길이 설정*/
  width:98px;
}

 

 이렇게 구조를 잡아두면 아래의 사진처럼 되어 있을 겁니다.

 아이템들은 opacity를 0으로 둬서 투명한 상태라 보이지 않고, 썸네일들이 존재하고, 버튼들이 보일 겁니다.

 이제 자바스크립트로 처리 작업만 거치면 끝입니다.

 

자바스크립트로 처리하기

 

자동 슬라이드 구현하기   

 

 시작은 처음 보여줄 슬라이드 아이템의 투명도를 풀어주는 것부터 시작합니다.

function sliderOn () {
 const slides = document.querySelector('.slides'); // 슬라이드뼈대 감지
 const Content = document.querySelector('.Thumbnail'); //썸네일 뼈대 감지
 const item = slides.getElementsByClassName('slide_item'); // 슬라이드 아이템 획득
 const thumbnail = Content.getElementsByClassName('thumbnail_item'); //썸네일 아이템 획득
 
 const firstEle = item[0]; // 첫번째 슬라이드 아이템
 const firstThumb = thumbnail[0]; // 첫번째 썸네일 아이템
 firstEle.classList.add('ontheSlide'); //첫번째 슬라이드 아이템에 ontheSlide 클래스 추가
  firstThumb.classList.add('ontheThumbnail'); // 첫번째 썸네일 아이템에 ontheThumbnail 클래스 추가
}
sliderOn();

 방법은 간단합니다.

 querySelector로 슬라이드에 있는 아이템을 획득하고, 썸네일 아이템을 획득한 겁니다.

 그리고 첫번째 슬라이더 아이템과 썸네일 아이템에 클래스를 추가해줘서 모습이 드러나도록 해줍니다.

 

 이제 활성화가 되었다면 자동으로 다음 아이템을 활성화를 해줄 필요가 있습니다.

 이 때 사용되는게 setInterval입니다.

 일정 시간마다 특정 행동을 하게 해주는 것이지요.

 

 코드를 짜보겠습니다.

 

  const gogogo = setInterval(sliderGo, 4000); // 4초마다 함수 sliderGo 함수 발동시키기
 function sliderGo () {
        
    const currentItem = document.querySelector('.ontheSlide'); // 현재 활성화된 슬라이드 아이템 감지
    const currentThumb = document.querySelector('.ontheThumbnail'); // 현재 활성화된 썸네일 아이템 감지
    currentItem.classList.remove('ontheSlide') //현재 활성화된 슬라이드 아이템 비활성화
    currentThumb.classList.remove('ontheThumbnail') // 현재 활성화된 썸네일 아이템 비활성화

  if (!currentItem.nextElementSibling) { // 만약 마지막 슬라이드 아이템이라면
      item[0].classList.add('ontheSlide') //첫번째 아이템을 활성화
      thumbnail[0].classList.add('ontheThumbnail') // 첫번째 썸네일을 활성화
    }   
   else { // 그 외의 경우
     currentItem.nextElementSibling.classList.add('ontheSlide') //다음 엘리먼트를 활성화
     currentThumb.nextElementSibling.classList.add('ontheThumbnail') //다음 썸네일을 활성화
        }   
    
  }

 

 이제 캐러셀이 정상적으로 작동하는 것을 알 수 있습니다.

 아래는 실제 코드를 짜서 만든 예제입니다.

 

 

다음 / 이전 버튼으로 제어하기

 

 현재까지는 그저 자동으로 다음 아이템이 나오는 형태에 불과합니다.

 사용자가 직접 버튼으로 이전/이후의 아이템을 볼 수 있도록 조절할 필요가 있습니다.

 

 방법은 간단합니다.

 addEventListener의 click 이벤트를 이용해 클릭을 감지해준 후, 클릭했을 때 다음/이전의 신호인지 구분해 발동해주는 겁니다.

 코드로 나타내면 이렇습니다.

 

 const nextButton = document.querySelector('.nextButton');//다음버튼 감지
 const prevButton = document.querySelector('.prevButton');//이전버튼 감지
nextButton.addEventListener('click',function(){//다음 버튼을 누른다면
  clearInterval(gogogo)//자동이동을 중지하고
  sliderGo();//수동으로 다음이동
})
prevButton.addEventListener('click',function(){//이전 버튼을 누른다면
  clearInterval(gogogo)//자동이동을 중지하고
  sliderGo('1');//수동으로 이전 이동
})  

 

 여기서 눈여겨볼 건 sliderGo라는 함수를 발동할 때 이전버튼을 눌러서 발동한 거라면 '1'이라는 숫자를 같이 전송하도록 한 겁니다.

 이건 버튼을 이전버튼으로 눌렀다는 걸 구분하기 위해 한 행동입니다.

 

 또한 자동이동을 clearInterval을 이용해서 멈췄는데, 이건 사용자가 이동버튼을 눌렀다가 자동이동 때문에 원하는 화면을 볼 수 없는 불상사를 막기 위한 조치입니다.

 

 이렇게 해놨다면 이제 sliderGo 함수를 고칠 필요가 있습니다.

 

  function sliderGo (isThat) {//isThat을 받아오기
    
    if (isThat) {//isThat이 지정되어 있다면
      var nextOr = 'previous'; //이전 버튼을 누른 것.
    }
    else { //isThat이 지정되지 않았다면
        var nextOr = 'next'; //다음 버튼을 누른 것.
    }
    
    const currentItem = document.querySelector('.ontheSlide');
    const currentThumb = document.querySelector('.ontheThumbnail');
    currentItem.classList.remove('ontheSlide')
    currentThumb.classList.remove('ontheThumbnail')
  if (nextOr === 'next'){  // 다음버튼을 눌렀다면
  if (!currentItem.nextElementSibling) {//마지막 아이템일 경우
      item[0].classList.add('ontheSlide') //처음으로 슬라이드아이템 이동
      thumbnail[0].classList.add('ontheThumbnail')//처음으로 썸네일 아이템 이동
    }   
   else { //그 외의 경우
     currentItem.nextElementSibling.classList.add('ontheSlide') //다음으로 슬라이드 아이템 이동
     currentThumb.nextElementSibling.classList.add('ontheThumbnail')//다음으로 썸네일 아이템 이동
        }   
  }
   else if (nextOr === 'previous') { // 이전 버튼을 눌렀다면
       if (!currentItem.previousElementSibling) { //첫번재 아이템일 경우
      item[item.length-1].classList.add('ontheSlide') //마지막 슬라이드로 이동
       thumbnail[thumbnail.length-1].classList.add('ontheThumbnail')  //마지막 썸네일로 이동
    }   
   else { //다른 경우
     currentItem.previousElementSibling.classList.add('ontheSlide') //이전 슬라이드 아이템으로 이동
     currentThumb.previousElementSibling.classList.add('ontheThumbnail')//이전 썸네일 아이템으로 이동
        }   
   } 
    
  }

 

 새롭게 고친 sliderGo 함수입니다.

 sliderGo()로 함수를 발동시킨 다음 버튼의 경우 isThat이 지정되지 않았기 때문에 nextOr이라는 변수가 next로 지정되었습니다.

 반면 sliderGo('1')로 함수를 발동시킨 이전 버튼의 경우 isThat이 지정되어 있기 때문에 nextOr 변수가 previous로 지정되었습니다.

 

 이 방식으로 어떤 버튼을 눌렀는지 구분한 후 그에 맞는 이동을 줬습니다.

 

썸네일을 눌렀을 때 이동하기

 

 사용자 입장에서 일일히 다음/이전 버튼을 눌러 아이템을 옮기는 건 번거로울 수 있습니다.

 단번에 점프해서 원하는 화면을 볼 수 있는 기능을 추가할 필요가 있습니다.

 보통 이럴 때엔 썸네일을 눌렀을 때 이동하도록 합니다.

 

 이 기능까지 구현한다면 편의성을 크게 향상시킬 수 있습니다.

for (var i=0; i<thumbnail.length; i++) { // 썸네일 갯수만큼 for문 발동  
  thumbnail[i].setAttribute('data-number',i); // 썸네일에 data-number를 설정해 몇번째 아이템인지 설정
thumbnail[i].addEventListener('click',function(event){ //썸네일 아이템을 클릭한다면
  clearInterval(gogogo) // 자동이동을 멈춘다.
   const currentItem = document.querySelector('.ontheSlide'); //현재 아이템 감지
    const currentThumb = document.querySelector('.ontheThumbnail'); //현재 썸네일 감지
    currentItem.classList.remove('ontheSlide') // 현재 아이템 비활성화
currentThumb.classList.remove('ontheThumbnail') // 현재 썸네일 비활성화
const number = event.target.getAttribute('data-number') // 몇 번째 썸네일을 클릭했는지 감지
  item[number].classList.add('ontheSlide')   // 썸네일과 같은 숫자의 아이템을 활성화
  event.target.classList.add('ontheThumbnail') // 클릭한 썸네일을 활성화
  
})  
}

 방법은 간단합니다.

 for문을 이용해 각 썸네일에 addEventListener를 이용해 click을 감지해줍니다.

 그리고 클릭한다면 몇 번째 썸네일을 누른건지 감지한 후 현재 아이템을 비활성화 한 후, 썸네일과 같은 순서의 아이템을 활성화 하는 겁니다.

 

 이 때 이용된 게 data-number로 몇 번째 버튼인지 지정해준 것이고, event.target을 이용해 눌려진 아이템을 감지한 것입니다.

 

완성품

 

 위에서 설명한 부분들을 모두 합쳐서 만든 예제입니다.

 

 

 자동 슬라이드, 다음/이전 버튼, 썸네일로 이동하기 기능이 모두 작동한다는 걸 아실 수 있습니다.

 

관련글

스크롤 내리면 상단에 고정되는 네비 메뉴 만들기

웹폰트를 경량화 후 최적화해서 적용하기

무한 스크롤 페이지 구현해보기