자바스크립트로 캐러셀(슬라이드) 만들기 1 (html, js)

<!-- 슬라이드를 감싸는 div -->

<div class = "slideshow-container">

 

<!-- 첫번째 슬라이드 -->

     <div class="mySlides fade">

           <div class="numbertext">1 / 5</div>

           <div class ="text">첫번째 페이지에요.</div>

      </div>

 

<!-- 두번째 슬라이드 -->

<div class="mySlides fade">

           <div class="numbertext">2 / 5</div>

           <div class ="text">두번째 페이지에요.</div>

      </div>

 

<!-- 세번째 슬라이드 -->

<div class="mySlides fade">

           <div class="numbertext">3 / 5</div>

           <div class ="text">세번째 페이지에요.</div>

      </div>

 

<!-- 네번째 슬라이드 -->

<div class="mySlides fade">

           <div class="numbertext">4 / 5</div>

           <div class ="text">네번째 페이지에요.</div>

      </div>

 

<!-- 마지막 슬라이드 -->

<div class="mySlides fade">

           <div class="numbertext">4 / 5</div>

           <div class ="text">마지막 페이지에요.</div>

      </div>

 

<!-- '<'모양 버튼 -->

<a class="prev" onclick="plusSlides(-1)">&#10094;</a>

<!-- '>'모양 버튼 -->

<a class="next" onclick="plusSlides(1)">& #10095;</a>

</div>

 

<!-- 동그라미 버튼 -->

<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>

   <span class="dot" onclick="currentSlide(4)"></span>

   <span class="dot" onclick="currentSlide(5)"></span>

 

 

 

<!--  자바스크립트 -->

<script>

let slideIndex = 1;

showSlides(slideIndex);

 

// '<'모양 버튼, '>'모양 버튼 활성화

function plusSlides(SlidIndexNumber) {

        showSlides(slideIndex += SlidIndexNumber);

}

 

// 보이는 슬라이드 활성화

function currentSlide(SlidIndexNumber) {

       showSlides(slideIndex = SlidIndexNumber);

 

function showSlides(SlidIndexNumber) {

      let i;

 

      // "mySlides" 클래스 요소들을 가지고온다

      let slides = document.getElementsByClassName("mySlides");

       // "dot" 클래스 요소들을 가져온다.

      let dots = documents.getElementsByClassName("dot");

 

      // 슬라이드 인덱스가 슬라이드의 총 개수를 초과시, 슬라이드 인덱스를 1로 설정

      if (SlidIndexNumber > slides.length) { slideIndex = 1 }

 

      // 슬라이드 인덱스가 1 미만 시, 슬라이드 인덱스를 슬라이드의 총 개수로 설정

      if (SlidIndexNumber < 1) { slideIndex = slides.length }

      for ( i = 0; i < slides.length; i++) {

             dots[i].className = dots[i].className.replace("active", "");

      }

      slides[SlideIndex -1].style.display = "block";

      dots[slideIndex - 1].className +=  " active";

</script>