[Javascript] 썸네일 인터랙션 구현하기

 

 

 

 

 

📄 JS

const infos = document.querySelectorAll('.info')
infos.forEach((info) => {
  addEvent(info.querySelector('ul'))
})

function addEvent(target) {
  const handleClass = (slideEl) => {
    slideEl.forEach((slide, index) => {
      slide.style.left = `${28 * index}px`
      if (index === 1 || index === 2 || index === 3) {
        slide.classList.add('active')
      } else {
        slide.classList.remove('active')
      }
    })
  }

  // 이미지를 섞어야하는 경우 이 함수를 사용한다.
  const shuffle = (images) => {
    images.sort(() => Math.random() - 0.5);
  }

  // 이미지 url을 작성하고 이미지 목록을 가져온다.
  // 내가 사용한 이미지는 img_01, img_02, img_03... 형식이라 숫자가 한자리인 경우 padStart를 사용하여 0을 붙여주었다.
  let imageArr = Array.from({length: 25}).map((obj, index) => {
    return `//[imgUrl]/img_${(index + 1).toString().padStart(2, '0')}.png`
  })
  shuffle(imageArr)

  target.querySelectorAll('li').forEach((slide, index) => {
    slide.style.backgroundImage = `url(${imageArr[index]})`
  })

  setInterval(() => {
    let slides = target
    let slideEl = target.querySelectorAll('li')

    handleClass(slideEl)
    slides.prepend(slideEl[5])
    handleClass(slideEl)
  }, 1500)
}

 

 

 

 

📄 HTML

<div class="info">
  <ul class="slides" id="slides">
    <li class="slide slide-1"></li>
    <li class="slide slide-2 active"></li>
    <li class="slide slide-3 active"></li>
    <li class="slide slide-4 active"></li>
    <li class="slide slide-5"></li>
    <li class="slide slide-6"></li>
  </ul>
  <p class="home-tab-panel__item-text">지금 0명이 보고 있어요</p>
</div>

 

 

 

 

📄 CSS

<style>
  .info {
    margin-top: 7px;
    display: flex;
    gap: 8px;
  }

  .slide_wrapper {
    padding: 0;
    margin: 0;
  }

  .slides {
    position: relative;
    display: flex;
    left: 0;
    top: 0;
    padding: 0;
    margin: 0;
    transition: all 0.5s;
    width: 110px;
    overflow: hidden;
    height: 32px;
  }

  .slide {
    position: absolute;
    width: 32px;
    height: 32px;
    background-size: 32px;
    list-style: none;
    margin-left: -7px;
    opacity: 0;
    transform: scale(20%);
    transition: all 0.5s;
    background-size: contain;
    border: 1px solid #fff;
    border-radius: 8px;
    background-color: #fff;
    box-sizing: border-box;
  }

  .slide.active {
    opacity: 1;
    transform: scale(100%);
  }

  .slide:nth-child(1) {
    z-index: 5;
    left: 0;
  }

  .slide:nth-child(2) {
    z-index: 4;
    left: 28px;
  }

  .slide:nth-child(3) {
    z-index: 3;
    left: 56px;
  }

  .slide:nth-child(4) {
    z-index: 2;
    left: 84px;
  }

  .slide:nth-child(5) {
    z-index: 1;
    left: 112px;
  }
</style>