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

https://www.longanit.com/2019/12/tao-slideshow-voi-html-css-va-javascript.html

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

Lê Hiền 12/21/2019
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!

3 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

Một số lưu ý khi bình luận

Tất cả bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy).

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Bạn có thể dùng ảnh động hoặc mã hóa code HTML để bình luận.