Tạo Slideshow với HTML, CSS và Javascript căn bản

Slideshow là một phần rất quan trọng và không thể thiếu trong website hiện nay, thực chất thì đây chỉ là những hình ảnh chạy qua lại 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 longanit sẽ cùng các bạn xây dựng một Slideshow đơn giản với HTML, CSS và Javascript.

Tạo Slideshow với HTML, CSS và Javascript căn bản


Bước 1: Tạo code HTML
<div class="slideshow-container">
  <h2>longanit.com 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>

Bước 2: Viết CSS cho Slideshow
<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}
}
</style>

Bước 3: Tạo code Javascript
<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>
Kết luận: Như vậy qua bài viết trên tôi đã hướng dẫn các bạn cách tạo Slideshow căn bản với HTML, CSS và Javascript. Hãy áp dụng code này vào blogspot cũng như các bốc cục trang web có hỗ trợ code nhé. Chúc các bạn thành công!

Nhận xét

  1. Nặc danh30/12/19

    ad chỉ giáo với tại sao cái mặc định hiện thị silde đầu tiên ko có tác dụng

    Trả lờiXóa
  2. Bạn đã add link img đúng chưa vậy

    Trả lờiXóa
  3. Hữu Khánh31/12/19

    Bạn ơi sữ dụng cho blogspot được không. Nếu có demo thì tốt quá

    Trả lờiXóa

Đăng nhận xét

Nếu phát hiện spam bạn sẽ bị xử lý. Bạn có thể chọn cho mình một kiểu bình luận như bên dưới.

1. Bằng tài khoản Blogger
2. Bằng Tên/URL: Vui lòng nhập tên và Website của bạn nếu có
3. Bình luận với tư cách người dấu mặt

Được xem nhiều nhất

Uconvert miễn phí cho Office 2003, 2007, 2010, 2013

Download OneKey Ghost v14.5.8.215 GPT (UEFI)

Hướng dẫn triển khai AMP trên Blogspot

Sửa lỗi con trỏ chuột bị quay vòng vòng Windows 7/8

Lấy lại Windows Photo Viewer trên Windows 10 giúp xem ảnh nhanh hơn

Đoạn code Javascript chống Ctrl + U và F12

Chia sẻ template blogspot longanit đang sử dụng