🎨 Image Slide

🐸 html

<div class="slideshow-container">

  <!-- image (1) -->
  <div class="mySlides fade">   <!--mySlides와 fade라는 class를 2개 적용한 것-->
      <img src="image01.jpg" alt="Little by little does the trick" style="width:100%; height:265px;" />
      <div class="text">Little by little does the trick</div>
  </div>
  
  <!-- image (2) -->
  <div class="mySlides fade">
      <img src="image02.jpg" alt="You will never know until you try" style="width:100%; height:265px;" />
      <div class="text">You will never know until you try</div>
  </div>
 
  <!-- image (3) -->
  <div class="mySlides fade">
      <img src="image03.jpg" alt="Whatever you do, make it pay" style="width:100%; height:265px;" />
      <div class="text">Whatever you do, make it pay</div>
  </div>
               
      <a class="prev" onclick="plusSlides(-1)">&#10094;</a>   <!-- &#10094 는 '<' 부호를 뜻함 -->
      <a class="next" onclick="plusSlides(1)">&#10095;</a>    <!-- &#10095 는 '>' 부호를 뜻함 -->

</div>
      <br>
  <div style="text-align:center">
      <span class="dot" onclick="currentSlide(1)"></span> 
      <span class="dot" onclick="currentSlide(2)"></span> 
      <span class="dot" onclick="currentSlide(3)"></span> 
  </div>

🐸 css

.mySlides {
    width:100%;
    height:250px;
}
img {
    vertical-align: middle;
}

/* Slideshow container */
.slideshow-container {
    max-width: 100%;       /* 또는 1000px로 지정 가능 */
    position: relative;
    margin: auto;
}
   
/* Next & previous buttons */
.prev, .next {
    position: absolute;   /* 부모태그(.slideshow-container)에 position:relative를 적용하였기에 absolute로 위치 지정 가능(기본 왼쪽 정렬) */
    top: 45%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 50px;
    transition: 0.6s ease;
    border-radius: 0 3px 0;
    cursor: pointer;
    }
  
/* Position the "next button" to the right */
    .next {
      right: 0;    /* absulute는 기본 왼쪽정렬이기 때문에 righ:0; 값을 지정하여 오른쪽으로 위치를 조절 */
      border-radius: 3px 0 0 3px;
    }
   
/* On hover, add a black background color with a little bit see-through */
    .prev:hover, .next:hover {
      background-color: rgba(0,0,0,0.8);
    }
   
/* Caption text */
    .text {
      color: #f2f2f2;
      font-size: 35px;
      padding: 8px 12px;
      position: absolute;
      bottom: 8px;
      width: 100%;
      text-align: center;
    }
  
/* The dots/bullets/indicators */
    .dot {
      cursor: pointer;
      height: 15px;
      width: 15px;
      margin: 0 2px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: #725275 0.6s ease;
    }
 
    .active, .dot:hover {
      background-color: #725275;
    }
  
/* Fading animation */
    .fade {
      animation-name: fade;
      animation-duration: 1.5s;
    }
    /*   -webkit-animation-name: fade;
         -webkit-animation-duration: 1.5s;  */
  
    @keyframes fade {
      from {opacity: .4} 
      to {opacity: 1}
    }
    /*   @-webkit-keyframes fade {
            from {opacity: .4} 
            to {opacity: 1}
          }   */

/* On smaller screens, decrease text size */
    @media only screen and (max-width: 300px) {
      .prev, .next,.text {font-size: 11px}
    }

🐸 javascript

let slideIndex = 1;      // 현재 이미지는 1이다
    showSlides(slideIndex);

      function plusSlides(n) {        // n은 -1 || 1 을 대입하는 자리
        showSlides(slideIndex += n);  // -1을 넣으면 0이된다(1 += -1 = 0), slideIndex = 0 / showSlides(slideIndex=0)이면 plusSlides라는 뜻
      }                               // 1을 넣으면 slideIndex는 2가 된다     0(pre) 1(현재) 2(next)

      function currentSlide(n) {      // showSlides함수를 실행해서 slideIndex값을 음수가 안나오게 조절(->n이 사진 갯수인 3보다 크게되면 slideIndex를 1로 만들어주고, 0보다 작게되면 slideIndex를 사진 갯수인 3으로 만들어준다)
        showSlides(slideIndex = n);   // showSlides함수는 n값이 1보다 작을땐 3, 3보다 클땐 1이 나오기 때문에, currentSlide는 slideIndex값인 1로 생각하면 된다    
      }

      function showSlides(n) {
        let i;
        let slides = document.getElementsByClassName("mySlides");
        let dots = document.getElementsByClassName("dot");
        let prev = document.getElementsByClassName('prev');
        let next = document.getElementsByClassName('next');

        if (n > slides.length) {      // 전체 갯수(3개)보다 크면 4부터, 4번째는 없으니깐 4번째는 첫번째사진이 되게 (n값(=slideIndex, 첫번째페이지, 현재값)이 전체 길이(3)보다 커지면 현재슬라이드 나오게)
          slideIndex = 1              // 첫번째사진(4번째는 첫번째 사진으로 반복되게 123 123 123), slideIndex=1이니깐, 위 함수에서 slideIndex=n이라고 했으니깐, n=slideIndex다. slideIndex가 3페이지보다 커지면 첫번째 슬라이드 나오게
        }    
        if (n < 1) {                  // 이전페이지 누른다는 뜻  (1=3이다) 첫번째에서 이전 페이지 누르면 3번째 사진이 나온다 (n값(slideIndex)이 1(slideIndex인 1)보다 작으면, 현재슬라이드는 3번째 슬라이드가 나오게)
          slideIndex = slides.length  //slideIndex(1)가 3번째 슬라이드(= 전체 길이)와 같다
        }
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";  // 아예 모든 슬라이드가 안보이게 해놓는다
        }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");  // replace()함수는 문자열을 바꿀때 사용  .replace("찾을 문자열". "바꿀문자열")
        }                                                                  // 모든 액티브를 없애기("")
        slides[slideIndex-1].style.display = "block";      // 현재 사진만 보이게(for문으로 이미지가 전체 안보이게 이미 설정했으니) , 0(pre) 1(현재) 2(next) 라서 현재슬라이드(1)를 넣으면 0,1,2가 된다
        dots[slideIndex-1].className += " active";         // 현재 눌렀을때 보라색이 active되게(for문으로 버튼이 전체 active되지 않게 이미 설정했으니)
        setTimeout(showSlides, 2000);
      }