슬라이더 이펙트 06

⭐️ slider Effect 슬라이더 효과 06 ⭐️

01. HTML

  <main id="main">
  <section id="sliderType">
      <div class="slider__wrap">
          <div class="slider__img">
              <div class="slider__inner">
                  <div class="slider s1" role="group" aria-label="1/5"><span>이미지1</span><img src="../assets/img/slideImage_02.jpg" alt="" alert=""></div>
                  <div class="slider s2" role="group" aria-label="2/5"><span>이미지2</span><img src="../assets/img/slideImage_04.jpg" alt="" alert=""></div>
                  <div class="slider s3" role="group" aria-label="3/5"><span>이미지3</span><img src="../assets/img/slideImage_07.jpg" alt="" alert=""></div>
                  <div class="slider s4" role="group" aria-label="4/5"><span>이미지4</span><img src="../assets/img/slideImage_09.jpg" alt="" alert=""></div>
                  <div class="slider s5" role="group" aria-label="5/5"><span>이미지5</span><img src="../assets/img/slideImage_10.jpg" alt="" alert=""></div>
              </div>
          </div>
          <div class="slider__btn">
              <button href="#" class="prev" role="button" aria-label="왼쪽 이미지">prev</button>
              <button href="#" class="next" role="button" aria-label="오른쪽 이미지">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>
  <!-- //section -->
</main>
<!-- main -->

02. CSS

  /* slider */
  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  .slider__wrap {
      width: 100%;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .slider__img {       /* 이미지가 보여지는 영역 */
      position: relative;
      width: 800px;
      height: 500px;
      overflow: hidden;
  }
  .slider__inner {    /* 이미지를 감싸고 있는 부모 : 움직이는 영역 */
      display: flex;
      flex-wrap: wrap;
      width: 10000px;  /* 이미지를 무한으로 돌리므로, 대략 10000 정도로 설정해줌 */
      height: 500px;
      position: relative;     /* 첫번째 이미지 왼쪽으로 마지막 이미지가 보이도록 위치 설정 */
      left: -800px;
      /* transition: all .3s;     이미지 움직임 속도 확인 아래에 js로 만들어줌 */
  }
  .slider__inner .transition {
      transition: all .3s;
  }
  .slider__inner span {
      position: absolute;
      left: 5px;
      top: 5px;
      background-color: rgba(0,0,0,0.4);
      color: #fff;
      padding: 5px 10px;
  }
  .slider {           /* 개별적인 이미지들 */
      position: relative;
      width: 800px;
      height: 500px;
  }
  /* .slider::before {
      position: absolute;
      left: 5px;
      top: 5px;
      background-color: rgba(0,0,0,0.4);
      color: #fff;
      padding: 5px 10px;
  } */
  /* .slider:nth-child(1)::before {content : '이미지01';}
  .slider:nth-child(2)::before {content : '이미지02';}
  .slider:nth-child(3)::before {content : '이미지03';}
  .slider:nth-child(4)::before {content : '이미지04';}
  .slider:nth-child(5)::before {content : '이미지05';}
  .slider:nth-child(6)::before {content : '이미지01';} 가상요소를 사용하면 오류가 날 수 있으므로 아래에 span 으로 적어줌*/

  /* .slider:nth-child(1) {z-index: 5;}
  .slider:nth-child(2) {z-index: 4;}
  .slider:nth-child(3) {z-index: 3;}
  .slider:nth-child(4) {z-index: 2;}
  .slider:nth-child(5) {z-index: 1;} */

  @media (max-width: 800px){
      .slider__img {
          width: 400px;
          height: 250px;
      }
      #header h1{
          line-height: 1.2;
      }
  }

  .slider__btn {}
  .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.2s;
      display: block;
      color: #fff;
      pointer-events: auto;       /* 버튼 빨리 누르면 오류 나는 것 해결을 위함 */
      border: 0;          /* 버튼 눌렀을 때 */
      cursor: pointer;
  }

  .slider__btn button.disable {
      pointer-events: none;       /* 버튼 빨리 누르면 오류 나는 것 해결을 위함*/
  }

  .slider__btn button:hover {
      background: rgb(129, 129, 129);
      border-radius: 50%;
  }
  .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(0,0,0,0.4);
      display: inline-block;
      border-radius: 50%;
      text-indent: -99999px;      /* 안 보이게 들여쓰기 */
      transition: all 0.3s;
      margin: 3px;
  }
  .slider__dot .dot.active {
      background: rgba(255,255,255,0.9);
  }

03. JS

  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,        // 이미지의 X축 크기
      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(){
          // 이미지 갯수만큼 닷메뉴

              // slider.forEach(() => dotIndex += "");
              // sliderDot.innerHTML = dotIndex;

              for(let i=1; i<=sliderLength; i++){
                  dotIndex += "";
              }
              sliderDot.innerHTML = dotIndex;
              sliderDot.firstElementChild.classList.add("active");

              
      }
      init();

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

          posInitial = sliderInner.offsetLeft;
          // console.log(posInitial)

          if (direction == -1){
              sliderInner.style.left = (posInitial + sliderWidth) + "px";
              currentIndex--;
          } else if (direction == 1){
              sliderInner.style.left = (posInitial - sliderWidth) + "px";
              currentIndex++;
          }  
      }
      gotoSlider();



      


      // 순간이동 이미지 슬라이드
      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");
          });

          if(currentIndex < 0){
              let dotActive = document.querySelectorAll(".slider__dot .dot");
              dotActive.forEach(el => el.classList.remove("active"));
              dotActive[4].classList.add("active");
          } else {
              let dotActive = document.querySelectorAll(".slider__dot .dot");
              dotActive.forEach(el => el.classList.remove("active"));
              dotActive[currentIndex].classList.add("active");
          }
      });
      sliderBtnNext.addEventListener("click", ()=>{
          gotoSlider(1);
          setTimeout(()=>{
              sliderBtn.classList.remove("disable");
          });

          if(currentIndex > 4){
              let dotActive = document.querySelectorAll(".slider__dot .dot");
              dotActive.forEach(el => el.classList.remove("active"));
              dotActive[0].classList.add("active");
          } else {
              let dotActive = document.querySelectorAll(".slider__dot .dot");
              dotActive.forEach(el => el.classList.remove("active"));
              dotActive[currentIndex].classList.add("active");
          }
      });

      
      sliderInner.addEventListener("transitionend", checkIndex);

결과보기

☛ 원본 소스 보기