[Frontend/JavaScript] JQuery 없이 반응형 슬라이더 만들기

 

HTML

슬라이더를 감싸줄 컨테이너 DIV 한개를 만듭니다 (<div id=slider></div>)

하위 항목을 div 로 만듭니다.

div 안에 원하는 내용을 넣어주시면 됩니다.

<div id="slider">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
<div>

 

CSS

슬라이더의 높이와 너비는 임의대로 설정해 주시면 됩니다.

height: 200px

width:100%

하위에 있는 색상설정 코드는 알기 쉽도록 색을 넣어서 테스트를 한 것입니다 (불필요)

body {
  margin: 0;
}

/* 슬라이더 크기 설정 */
#slider {
  height: 200px;
  width: 100%;
}

/* 색상 설정 */
#slider>div:nth-child(1) {background-color: rgb(152, 255, 121);}
#slider>div:nth-child(2) {background-color: rgb(121, 255, 237);}
#slider>div:nth-child(3) {background-color: rgb(121, 168, 255);}
#slider>div:nth-child(4) {background-color: rgb(195, 121, 255);}
#slider>div:nth-child(5) {background-color: rgb(255, 121, 222);}
#slider>div:nth-child(6) {background-color: rgb(255, 121, 121);}
#slider>div:nth-child(7) {background-color: rgb(255, 253, 121);}

 

 

Responsive Slider - 원리

컨테이너가 3개씩 보여진다고 하고, 슬라이더가 4개의 항목을 가지고 있다고 하면,

위와 같은 화면으로 시작을 하여 1~3번까지의 항목을 보여준 다음,

슬라이더가 1칸씩 왼쪽으로 이동하게 되는 원리입니다.

 

 

Responsive Slider - 변수

필수적으로 입력해야하는 값은, id, _web 입니다.

반응형으로 보여주고 싶은 경우에는 _tab(태블릿에서 보여줄 항목의 개수) / _mobile(모바일에서 보여줄 항목의 개수) 를 추가로 넣어주시면 됩니다.

 

- 생성시 필요한 값

이름	설명
id	컨테이너의 아이디
_web	1000px 이상, 컨테이너가 보여줄 항목의 수
_tab	1000px 미만 / 768px 이상, 컨테이너가 보여줄 항목의 수
_mobile	768px 미만, 컨테이너가 보여줄 항목의 수

 

- 내부에서 사용하는 값

이름	설명
containerWidth	컨테이너의 가로길이
sliderItemWidth	슬라이더 내부 항목의 가로길이
totalCount	항목의 전채 갯수
display	컨테이너에 보여줄 항목의 갯수

 

 

Responsive Slider - 컨테이너

- 클래스 설정

container

 

- 스타일 추가

position: relative;

overflow: hidden;

 

var dom = document.querySelector('#'+id);
dom.className = 'container';
dom.style.position = 'relative';
dom.style.overflow = 'hidden';

 

Responsive Slider - 슬라이더

- 클래스 설정

slider

 

- 스타일 추가

position: relative;

overflow: hidden;

height: 100%;

left: 0;

transition: left .5s;

width: (전체항목수 X 항목너비)px

 

// 새로 생성
var dom = document.createElement('div');
dom.className = 'slider'
dom.style.position = 'relative';
dom.style.overflow = 'hidden';
dom.style.height = '100%';
dom.style.left = 0;
dom.style.transition = 'left .5s';
dom.style.width = totalCount * sliderItemWidth + 'px';

 

 

Responsive Slider - 슬라이더 내부 항목

우선 만들어진 슬라이드 안에 기존의 항목을 집어넣습니다.

var temp = container.innerHTML;
container.innerHTML = '';
slider.innerHTML = temp;
container.appendChild(slider);

 

이어서, 항목에 스타일을 수정합니다

float: left;

height: 100%;

width: (항목너비)px

var items = document.querySelector('.slider').children;
for(var i=0; i<items.length; i++){
  items[i].style.float = 'left';
  items[i].style.height = '100%';
  items[i].style.width = sliderItemWidth + 'px';
}

 

 

Responsive Slider - 윈도우 리사이즈 이벤트 (반응형을 위한 함수)

// 이벤트 함수
function setDisplayCount(count) {
  display = count;

  containerWidth = container.offsetWidth;
  sliderItemWidth = containerWidth / display;

  document.querySelector('.slider').style.width = totalCount * sliderItemWidth + 'px';
  var items = document.querySelector('.slider').children;
  for(var i=0; i<items.length; i++){
    items[i].style.float = 'left';
    items[i].style.height = '100%';
    items[i].style.width = sliderItemWidth + 'px';
  }
}

// 사이즈 별로 컨테이너에 보여줄 항목의 개수를 설정
window.onresize = function(event) {
  if(window.innerWidth >= 1000 && display != _web){
    setDisplayCount(_web);
  }else if(window.innerWidth < 1000 && window.innerWidth >= 768 && display != _tab) {
    setDisplayCount(_tab);
  }else if (window.innerWidth < 768 && display != _mobile) {
    setDisplayCount(_mobile);
  }
};

 

 

Responsive Slider - 슬라이더의 기본 이벤트

함수명	내용
move	원하는 인덱스의 슬라이드로 이동
prev	이전으로 한칸 이동
next	다음으로 한칸 이동
auto	일정 시간마다 자동으로 오른쪽으로 한칸씩 이동
stop	auto 함수 멈춤

return {
  move: function(index){
    left = (-1)*sliderItemWidth*index;
    document.querySelector('.slider').style.left = left + 'px';
  },
  prev: function(){
    left += sliderItemWidth;
    var limit = 0;
    if(left > limit){
      left = limit;
    }
    document.querySelector('.slider').style.left = left + 'px';
  },
  next: function(){
    left -= sliderItemWidth;
    var limit = (-1) * sliderItemWidth * (totalCount - display);
    if(left < limit){
      left = limit;
    }
    document.querySelector('.slider').style.left = left + 'px';
  },
  auto: function(){
    interval = setInterval(function(){
      left -= sliderItemWidth;
      var limit = (-1) * sliderItemWidth * (totalCount - display);
      if(left < limit){
        left = 0;
      }
      document.querySelector('.slider').style.left = left + 'px';
    }, 2000)
  },
  stop: function(){
    clearInterval(interval);
  }
}

 

 

Responsive Slider - 완성코드

See the Pen Vanilla Script - Slider by 홍지성 (@lnbvocxe) on CodePen.