Hướng dẫn tạo Slideshow với HTML, CSS và Javascript - How t

Slideshow hay slider là một phần rất quan trọng trong website hiện nay, thực chất thì chúng là một bộ chứa những hình ảnh có kích thước khá lớn có thể trượt qua lại giữa các ảnh, chúng thường được đặt ở đầu trang để mô tả những nội dung đáng chú ý của trang vào thời điểm đó. Trong bài này mình sẽ cùng các bạn xây dựng một Slideshow đơn giản với HTML, CSS và Javascript.

1. Xây dựng giao diện

Trước tiên chúng ta cần chuẩn bị các hình ảnh để hiển thị, các bạn tạo thư mục images và dán vào 3 hình ảnh slide-1.jpg, slide-2.jpg"và slide-3.jpg.

Tiếp theo là xây dựng giao diện cho trang, các bạn tạo file index.html cùng cấp với thư mục images để chạy chính, sau đó tạo các thành thành của slideShow bằng đoạn mã dưới đây:

<div class="slideshow-container">
  <h2>Freetus.net hướng dẫn tạo slideShow đơn giản</h2>
  <div class="mySlides fade">
    <img src="./images/slide-1.jpg" style="width:100%">
    <div class="text">Nội dung caption của slide đầu tiên!</div>
  </div>

  <div class="mySlides fade">
    <img src="./images/slide-2.jpg" style="width:100%">
    <div class="text">Nội dung caption của slide thứ 2!</div>
  </div>

  <div class="mySlides fade">
    <img src="./images/slide-3.jpg" style="width:100%">
    <div class="text">Nội dung caption của slide thứ 3!</div>
  </div>
</div>
<br>

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

Ở đây, mình có gán sự các sự kiện trực tiếp ở phần tử HTML, nó khá là thiếu chuyên nghiệp tuy nhiên vì chúng ta chủ yếu tìm hiểu về định dạng và cách xử lý với CSS và Javascript nên mình sẽ sử dụng phương pháp này để các bạn dể hiểu hơn.

Vậy là xong bước tạo giao diện, lúc này, cây thư mục sẽ có dạng như thế này:

Chúng ta cùng chuyển sang bước tiếp theo nhé!

2. Thêm CSS để định dạng các thành phần của slideShow

Trong bước này, chúng ta sẽ dùng các đoạn mã CSS để định dạng các thành phần của trang, các bạn dán đoạn mã CSS dưới đây vào bên trong thẻ style:

* {
  box-sizing:border-box
}
h2 {
  text-align: center;
}
/* Slideshow container */
.slideshow-container {
  max-width: 500px;
  position: relative;
  margin: auto;
}
/* Ẩn các slider */
.mySlides {
    display: none;
}
/* Định dạng nội dung Caption */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* định dạng các chấm chuyển đổi các slide */
.dot {
  cursor:pointer;
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
/* khi được hover, active đổi màu nền */
.active, .dot:hover {
  background-color: #717171;
}

/* Thêm hiệu ứng khi chuyển đổi các slide */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 3s;
  animation-name: fade;
  animation-duration: 3s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

Trong đoạn mã trên mình đã ẩn hết các slide hình ảnh đi, trong bước tiếp theo chúng ta sẽ sử dụng Javascript để hiển thị những hình ảnh phù hợp.

3. Xử lý bằng Javascript

Các bạn thêm đoạn mã script dưới đây vào sau thẻ body:

<script>
  //khai báo biến slideIndex đại diện cho slide hiện tại
  var slideIndex;
  // KHai bào hàm hiển thị slide
  function showSlides() {
      var i;
      var slides = document.getElementsByClassName("mySlides");
      var dots = document.getElementsByClassName("dot");
      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", "");
      }

      slides[slideIndex].style.display = "block";  
      dots[slideIndex].className += " active";
      //chuyển đến slide tiếp theo
      slideIndex++;
      //nếu đang ở slide cuối cùng thì chuyển về slide đầu
      if (slideIndex > slides.length - 1) {
        slideIndex = 0
      }    
      //tự động chuyển đổi slide sau 5s
      setTimeout(showSlides, 5000);
  }
  //mặc định hiển thị slide đầu tiên 
  showSlides(slideIndex = 0);


  function currentSlide(n) {
    showSlides(slideIndex = n);
  }
</script>

Trong đoạn script trên, có một điểm các bạn cần lưu ý đó là khi khai báo hàm showSlides mình không hề để tham số mà tại sao mình lại gọi hàm như thế này:

showSlides(slideIndex = 0);
showSlides(slideIndex = n);

Thực chất đây không phải là truyền tham số, câu lệnh này có nghĩa là trước khi chạy hàm showSlides() thì mình sẽ gán giá trị cho biến slideIndex. Tại sao phải làm điều này ? Các bạn có thể để ý hàm showSlides() không hề có tham số vậy làm sao nó biết cần hiển thị slide nào, nó dựa vào biến slideIndex mình khai báo lúc đầu. Quy trinh hoạt động của trang sẽ như sau:

• Khi load xong trang tự động gọi hàm showSlides() với biến slideIndex = 0, hàm này sẽ hiển thị slide sau đó tăng biến slideIndex lên một đơn vị, tiếp đến nếu không có thao tác mình sử dụng setTimeout(showSlides, 5000); để tự động chuyển slider sau 5s, khi này slideIndex = 1, và hàm showSlides() lại lặp lại quá trình đó.
• Nếu có thao tác vào các chấm, hàm currentSlide(n)  sẽ được gọi với tham số n truyền vào là trang slide muốn đến, đầu tiên ta gán lại biến slideIndex = n, sau đó gọi hàm showSlides().

Xong rồi! giờ các bạn chạy file index.html và xem thành quả nhé.

4. Lời kết

Vậy là mình đã cùng các bạn xây dựng xong một slideShow đơn giản, qua bài viết này mình hi vọng các bạn đã nắm được cách thức hoạt động của slideShow, các bạn có thể dựa vào đó để tùy biến sao cho phù hợp nhất với website của mình. 

Nếu có bất cứ thắc mắc nào các bạn có thể để lại trong phần bình luận, Hẹn gặp lại trong các bài viết tiếp theo trên Zaidap.com.net.

Tham khảo: w3schools.com

DEMO