[Javascript] 무한 슬라이드 만들기

무한 슬라이드 만드는 방법이다.

 

HTML

<!-- slide -->
<div id="slide_list" class="slide_list">
    <ul id="slides">
      <li><a href="#"><img src="/src/images/main/Promotion.png" alt="이미지1"></a></li>
      <li><a href="#"><img src="/src/images/main/Promotion2.png" alt="이미지2"></a></li>
      <li><a href="#"><img src="/src/images/main/Promotion.png" alt="이미지3"></a></li>
    </ul>
    <p class="arrow_bar">
       <span class="prev">&lang;</span>
       <span class="next">&rang;</span>
    </p>
</div>

 

CSS

/* slide_list */
.slide_list {position: relative; overflow: hidden; width: 414px; height: 212px; margin: 50px auto;}
.slide_list .slides {position: absolute; top: 0; left: 0; width: 1242px; transition: 0.5s ease-in-out;}
.slide_list .slides li:first-child {margin-left: 100px;}
.slide_list .slides li:not(:last-child) {float: left; margin-right: 100px;}

/* arrow_bar */
.arrow_bar span {position: absolute; top: 42%; padding: 10px; text-align: center; font-size: 1.3em; color: #FFF; cursor: pointer; border-radius: 50%; background-color: transparent;}
.arrow_bar .prev {left: 0px;}
.arrow_bar .next {right: 0px;}

 

JS

let slides = document.querySelector('.slides');
let slideImg = document.querySelectorAll('.slides li');
currentIdx = 0;
slideCount = slideImg.length;
prev = document.querySelector('.prev'); //이전 버튼
next = document.querySelector('.next'); //다음 버튼
slideWidth = 300; //슬라이드이미지 넓이
slideMargin = 100; //슬라이드 끼리의 마진값
makeClone(); // 처음이미지와 마지막 이미지 복사 함수
initfunction(); //슬라이드 넓이와 위치값 초기화 함수
function makeClone() {
  let cloneSlide_first = slideImg[0].cloneNode(true);
  let cloneSlide_last = slides.lastElementChild.cloneNode(true);
  slides.append(cloneSlide_first);
  slides.insertBefore(cloneSlide_last, slides.firstElementChild);
}
function initfunction() {
  slides.style.width = (slideWidth + slideMargin) * (slideCount + 2) + 'px';
  slides.style.left = -(slideWidth + slideMargin) + 'px';
}
next.addEventListener('click', function () {
  //다음 버튼 눌렀을때
  if (currentIdx <= slideCount - 1) {
    //슬라이드이동
    slides.style.left = -(currentIdx + 2) * (slideWidth + slideMargin) + 'px';
    slides.style.transition = `${0.5}s ease-out`; //이동 속도
  }
  if (currentIdx === slideCount - 1) {
    //마지막 슬라이드 일때
    setTimeout(function () {
      //0.5초동안 복사한 첫번째 이미지에서, 진짜 첫번째 위치로 이동
      slides.style.left = -(slideWidth + slideMargin) + 'px';
      slides.style.transition = `${0}s ease-out`;
    }, 500);
    currentIdx = -1;
  }
  currentIdx += 1;
});
prev.addEventListener('click', function () {
  //이전 버튼 눌렀을때
  console.log(currentIdx);
  if (currentIdx >= 0) {
    slides.style.left = -currentIdx * (slideWidth + slideMargin) + 'px';
    slides.style.transition = `${0.5}s ease-out`;
  }
  if (currentIdx === 0) {
    setTimeout(function () {
      slides.style.left = -slideCount * (slideWidth + slideMargin) + 'px';
      slides.style.transition = `${0}s ease-out`;
    }, 500);
    currentIdx = slideCount;
  }
  currentIdx -= 1;
});