슬라이드 이펙트 06

슬라이더 이펙트_06

이미지 5개를 기준으로 맨 뒷부분에 첫 이미지를, 맨 앞부분에 마지막 이미지를 추가해 마지막 이미지에 도달시 순간적으로 첫 이미지로 이동시켜 무한으로 이동시키는것과 같은 효과를 지닌 예제를 만들어 보도록 하겠습니다 👩🏻‍💻

---

HTML 코드

HTML 코드는 크게 신경쓸것이 없으나,
슬라이드를 구현하기 위해 하단과 같이 코드를 작성해 뼈대를 생성해줍시다 🏄‍♂️

<main id="main">
  <section id="sliderType01">
      <div class="slider__wrap">
          <div class="slider__img">
              <div class="slider__inner">
                  <div class="slider s1"><span>이미지1</span><img src="../../assets/slider/effect_img_01@2x.jpg" alt="이미지1"></div>
                  <div class="slider s2"><span>이미지2</span><img src="../../assets/slider/effect_img_02@2x.jpg" alt="이미지2"></div>
                  <div class="slider s3"><span>이미지3</span><img src="../../assets/slider/effect_img_03@2x.jpg" alt="이미지3"></div>
                  <div class="slider s4"><span>이미지4</span><img src="../../assets/slider/effect_img_04@2x.jpg" alt="이미지4"></div>
                  <div class="slider s5"><span>이미지5</span><img src="../../assets/slider/effect_img_05@2x.jpg" alt="이미지5"></div>
                  <!-- <div class="slider"><img src="../../assets/slider/effect_img_06@2x.jpg" alt="이미지5"></div> -->
              </div>
          </div>
          <div class="slider__btn">
              <button href="#" class="prev">prev</button>
              <button href="#" class="next">next</button>
          </div>
          <div class="slider__dot">
              <!-- <a href="#" class="dot active">이미지1</a>
              <a href="#" class="dot">이미지2</a>
              <a href="#" class="dot">이미지3</a>
              <a href="#" class="dot">이미지4</a>
              <a href="#" class="dot">이미지5</a> -->
          </div>
      </div>
  </section>
</main>

---

CSS 코드 : 애니메이션

CSS를 통해 각각 dot과 active 클래스를 생성해 슬라이드 닷 까지 구성해줍니다. 👀

/* slider */
  .slider__wrap {
      /* background: #000; */
      width: 100%;
      height: 100vh;
      /* background-color: #ccc; */
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .slider__img { /*이미지 보이는 영역 */
      position: relative;
      width: 800px;
      height: 450px;
      /* overflow: hidden; */
  }

  .slider__inner{ /* 이미지를 감싸고 있는 부모 : 움직이는 부분 */
      display: flex;
      flex-wrap: wrap;
      width: 10000px; /* 총 이미지 6개 */
      height: 450px;
      position: relative;
      left: -800px;
      user-select: none;
  }
  .slider__inner.transition{
      transition: all 0.3s;
  }

  .slider { /* 개별적인 이미지 */
      width: 800px;
      height: 450px;
      position: relative;
  }

  .slider span{
      position: absolute;
      left: 5px;
      top: 5px;
      background: rgba(0,0,0,0.4);
      color: #fff;
      padding: 5px 10px;
      /* border-radius: 10px; */
  }

  /* .slider:nth-child(1)::before {content: "이미지 1";}
  .slider:nth-child(2)::before {content: "이미지 2";}
  .slider:nth-child(3)::before {content: "이미지 3";}
  .slider:nth-child(4)::before {content: "이미지 4";}
  .slider:nth-child(5)::before {content: "이미지 5";}
  .slider:nth-child(6)::before {content: "이미지 1";} */

  @media(max-width: 800px){
      .slider__img{
          width: 400px;
          height: 225px;
      }
  }

  .slider__btn button {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 50px;
      height: 50px;
      background: rgba(0,0,0,0.4);
      text-align: center;
      line-height: 50px;
      transition: all 0.25s;
      display: block;
      color: #fff;
      pointer-events: auto;
      border: 0;
      cursor: pointer;
  }

  .slider__btn button.disable button{
      pointer-events: none;
  }

  .slider__btn button:hover{
      background: rgb(38, 93, 133);
  }
  .slider__btn button.prev {
      left: 0;
  }
  .slider__btn button.next {
      right: 0;
  }

  .slider__dot {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 20px;
  }
  .slider__dot .dot{
      width: 20px;
      height: 20px;
      background: rgba(255, 255, 255, 0.4);
      /* border-radius: 50%; */
      transform: scale(0.6) rotate(45deg);;
      display: inline-block;
      text-indent: -9999px;
      transition: all 0.3s;
      margin: 3px;
      box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.386);
  }
  .slider__dot .dot.active{
      background: rgba(255,255,255,0.9);
      transform: scale(1.1) rotate(45deg);
  }

---

JS 코드 : split 기준으로 한글자씩 span으로 감싸주기!

1. 첫번째 이미지와 마지막 이미지를 복사해서 넣고 이동 2. insertBefore/appendChild을 통해 각각 앞 뒤에 처음이미지와 마지막 이미지를 넣어줍니다. 3. setTimeout을 통해 연속적으로 앞뒤로 이동시켜주는 버튼을 클릭해 버그가 발생하는것을 막습니다. 4. 한장씩 넘어가는데 마지막 지점에 도달시 insertBefore로 생성된 마지막 사진이 나오게 되고 그 순간에 다시 첫번째 이미지로 넘어갑니다.

const sliderWrap = document.querySelector(".slider__wrap")
  const sliderImg = document.querySelector(".slider__img")                // 보여지는 영역
  const sliderInner = document.querySelector(".slider__inner")            // 움직이는 영역
  const slider = document.querySelectorAll(".slider")                     // 이미지
  const sliderDot = document.querySelector(".slider__dot")                // 슬라이더 닷
  const sliderBtn = document.querySelector(".slider__btn")                // 버튼
  const sliderBtnPrev = document.querySelector(".slider__btn .prev")      // 왼쪽 버튼
  const sliderBtnNext = document.querySelector(".slider__btn .next")      // 오른쪽 버튼
  
  let currentIndex = 0,
      sliderLength = slider.length,
      sliderWidth = slider[0].offsetWidth,    
      sliderFirst = slider[0],                     //첫번째 이미지
      sliderLast = slider[sliderLength-1];         //마지막 이미지
      cloneFirst = sliderFirst.cloneNode(true),    //첫번째 이미지 복사
      cloneLast = sliderLast.cloneNode(true);      //마지막 이미지 복사

      dotIndex = "";

  sliderInner.appendChild(cloneFirst);
  sliderInner.insertBefore(cloneLast, sliderFirst);

  function init(){
      for(let i=1; i<=slider.length; i++){
          // sliderDot.innerHTML += "이미지"+i+"";
          dotIndex += "이미지"+i+"";
      }
      sliderDot.innerHTML = dotIndex;
      sliderDot.firstElementChild.classList.add("active");
  }
  init();

  function gotoSlider(direction){
      sliderInner.classList.add("transition");
      sliderBtn.classList.add("disable");

      //각 슬라이드 이미지가 가진 위치는 다르기 때문에 고정값이 아닌 각 이미지의 위치 값인 posInitial을 넣어
      posInitial = sliderInner.offsetLeft;
      console.log("ddd"+posInitial)
      console.log(sliderWidth)

      if(direction == -1){
          //각 위치간 갖고 있는 값에 기본 이미지 넓이 값을 더해줘 앞으로 이동하고
          sliderInner.style.left = (posInitial + sliderWidth)+"px";
          currentIndex --;
      } else if (direction == 1) {
          //각 위치간 갖고 있는 값에 기본 이미지 넓이 값을 빼줘 뒤로 이동하고
          sliderInner.style.left = (posInitial - sliderWidth)+"px";
          currentIndex ++;
      }   
  }

  //순간이동 이미지 슬라이드
  function checkIndex(){
      sliderInner.classList.remove("transition");

      console.log(currentIndex)

      //마지막 이미지
      if(currentIndex == sliderLength){
          sliderInner.style.left = -(1 * sliderWidth)+"px";
          currentIndex = 0;
      }

      //처음 이미지
      if(currentIndex == -1){
          sliderInner.style.left = -(sliderLength * sliderWidth)+"px";
          currentIndex = sliderLength - 1;
      }
  }

  sliderBtnPrev.addEventListener("click", () => {
      gotoSlider(-1);
      setTimeout(()=>{
          sliderBtn.classList.remove('disable');
      },300);
  });
  sliderBtnNext.addEventListener("click", () => {
      gotoSlider(1);
      setTimeout(()=>{
          sliderBtn.classList.remove('disable');
      },300);
  });
  sliderInner.addEventListener("transitionend", checkIndex);
      // alert(sliderWidth);

결과

느무느무 믓즈인~~~~~ 슬라이드 이펙트 06번 완승~~~💃🏻

---

원본 소스 보기

원본 페이지 보기