JSFiddle - React, Tailwind, and code Playground

by evon0306

HTML

<!--做一個容器-->
<div class="cintainer">
   <!--放入照片-->
   <div class="mySlides fade">
      <div class="numbertext">1 / 5</div>
      <img style="height:100%;" src="https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2580&q=80" alt="food">
      <div class="text">Pancake Stack @briewilly</div>
   </div>

   <div class="mySlides fade">
      <div class="numbertext">2 / 5</div>
      <img style="height:100%;" src="https://images.unsplash.com/photo-1482049016688-2d3e1b311543?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2510&q=80" alt="food">
      <div class="text">Avocado and Egg Toast</div>
   </div>
   
   <div class="mySlides fade">
      <div class="numbertext">3 / 5</div>
      <img style="height:100%;" src="https://images.unsplash.com/photo-1532980400857-e8d9d275d858?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2487&q=80" alt="food">
      <div class="text">delicious pancakes</div>
   </div>

   <div class="mySlides fade">
      <div class="numbertext">4 / 5</div>
      <img style="height:100%;" src="https://images.unsplash.com/photo-1488900128323-21503983a07e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2487&q=80" alt="food">
      <div class="text">Autumnal Treats</div>
   </div>

   <div class="mySlides fade">
      <div class="numbertext">5 / 5</div>
      <img style="height:100%;" src="https://images.unsplash.com/photo-1612240498936-65f5101365d2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2487&q=80" alt="food">
      <div class="text">Bagel</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...

SCSS

* {box-sizing:border-box}
.cintainer{
   max-width: 600px;
   position: relative;
   margin: auto;
   /* 設定slide show的圖片先不顯示 */
   .mySlides {
      display: none;
      /* 將圖片預設為不要顯示 */
      width: 100%;
      height: 90vh;
      img{
         display: block;
         width: 100%;
         height: 100%;
         object-fit: cover;
         object-position: center;
         
      }
      .text{
         color: #fff;
         font-size: 16px;
         padding: 8px 12px;
         position: absolute;
         bottom: 8px;
         width: 100%;
         text-align: center;
      }
      .numbertext {
         color: #f2f2f2;
         font-size: 12px;
         padding: 8px 12px;
         position: absolute;
         top: 0;
      }
   }
   .prev, .next{
      cursor: pointer;
      /* 相對於它的父元素(container)進行定位 */
      position: absolute;
      top: 50%;
      width: auto;
      margin-top: -20px;
      padding: 15px;
      color: rgb(255, 255, 255);
      font-size: 18px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
      user-select: none;
      &:hover{
         background-color: rgba(0,0,0,0.8);
      }
      
   }
   .next{
      right: 0;
      border-radius: 3px 0 0 3px;
   }

}

.dot{
   cursor: pointer;
   height: 15px;
   width: 15px;
   margin: 20px 2px;
   background-color: #bbb;
   border-radius: 50%;
   display: inline-block;
   transition: background-color 0.6s ease;
}
.active, .dot:hover {
   background-color: #717171;
}
.fade {
   animation-name: fade;
   animation-duration: 1.5s;
}

@keyframes fade {
   from {opacity: 0.4} 
   to {opacity: 1}
}

JavaScript

let slideIndex = 1;
let timer;

showSlides(slideIndex);

function plusSlides(n) {
   showSlides(slideIndex += n);
}

function currentSlide(n) {
   clearTimeout(timer); // 清除計時器
   showSlides(slideIndex = n);
}

function showSlides(n) {
   let slides = document.querySelectorAll(".mySlides");
   let dots = document.querySelectorAll(".dot");
   if (n > slides.length) {slideIndex = 1} 
   if (n < 1) {slideIndex = slides.length}
   for (let i = 0; i < slides.length; i++) {
      slides[i].style.display = "none"; 
   }
   for (let i = 0; i < dots.length; i++) {
      dots[i].classList.remove("active");
   }
   slides[slideIndex-1].style.display = "block"; 
   dots[slideIndex-1].classList.add("active");
   timer = setTimeout(() => {
      plusSlides(1);
   }, 3000);
}