Hướng dẫn cách tạo slide show ẩn hiện bằng jquery

I.Giới thiệu:

Slideshow là 1 ứng dụng rất phổ biến trong UI web.
Hiện có rất nhiều plugin hỗ trợ slideshow.
Tuy nhiên trường hợp nếu plugin không hỗ trợ hoặc không phù hợp với css, layout trang web của bạn thì việc biết cách code 1 slide hoặc hiểu rõ slide có thể giúp bạn tự tạo 1 slideshow khác phù hợp hoặc có thể tùy biến plugin 1 cách hiệu quả.

II.Demo slideshow:

III. Ý tưởng code:

Đầu tiên chúng ta sẽ có 1 danh sách hình ảnh. Sau đó xếp chồng chúng lên nhau như hình dưới đây.
Việc xếp chồng sẽ được thực hiện bởi css. Cụ thể là container bao bên ngoài danh sách ảnh sẽ có thuộc tính position: relative trong khi đó từng item hình ảnh sẽ có thuộc tính position: absolute; top:0; left:0 đây là các css giúp các item hình ảnh xếp thành 1 chồng.
Tiếp theo ẩn tất các các hình ảnh bằng thuộc tính display: none, tuy nhiên ngoại lệ hình đầu tiền sẽ được hiện bằng thuộc tính display: block, và hình ảnh đầu tiên sẽ được thêm 1 class active để đánh dấu là item hình ảnh được hiện.

Khi slide chạy, đầu tiên cần xác định item ảnh nào đang có class active thì ẩn item đó đi remove class active sau đó chọn phần tử next tiếp theo hiện nó lên và thêm vào class active
Trường hợp chạy đến cuối slide nếu muốn slide chạy vô cực thì hay chuyển active về phần tử đâu tiên.

IV. Source code:

<!DOCTYPE html>
<html>
<body>
  <div class="container_slide_show">
    <ul id="slide_show">
      <li><img src="images/1.jpg" ></li>
      <li><img src="images/2.jpg" ></li>
      <li><img src="images/3.jpg" ></li>
      <li><img src="images/4.jpg" ></li>
      <li><img src="images/5.jpg" ></li>
    </ul>
    <div class="container_button">
      <button id="prev_slide" class="slide_btn">Prev</button>
      <button id="next_slide" class="slide_btn">Next</button>
    </div>
  </div>
</body>
</html>
<script src="https://code.jquery.com/jquery-1.7.0.min.js"></script>
<script>
  $('#slide_show > li:first').css('display', 'block').addClass('active');
  var isHoverBtn = false;

  $('#next_slide').bind('click', function() {
    runSlide(true);
  });

  $('#prev_slide').bind('click', function() {
    runSlide(false);
  });

  $('.slide_btn').hover(function() {
    isHoverBtn = true;
  }, function() {
    isHoverBtn = false;
  });

  setInterval(function(){
    if (!isHoverBtn) {
      runSlide(true);
    }
  }, 3000);


  function runSlide(isNext) {
    var oldItem = $('#slide_show > li.active');
    var newItem;
  
    if (isNext) {
      newItem = oldItem.next();

      if (newItem.length === 0) {
        newItem = $('#slide_show > li:first');
      }
    } else {
      newItem = oldItem.prev();

      if (newItem.length === 0) {
        newItem = $('#slide_show > li:last');
      }
    }

    if (newItem.length === 0) {
      newItem = $('#slide_show > li:eq(0)');
    }

    oldItem.fadeOut(function() {
      $(this).removeClass('active');
    });

    newItem.fadeIn(function() {
        $(this).addClass('active');
      });
  }
</script>
<style>
*{
  padding:0px;
  margin:0px;
}
html{
  width:100%;
  height:100%;
}
body{
  height:100%;
  width:100%;
}
html > body {
     height: 100%;
}
#slide_show {
  width: 400px;
  height: 200px;
  overflow: hidden;
  position: relative;
}
#slide_show > li {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}
#slide_show > li > img {
  list-style: none;
  width: 400px;
}
.container_slide_show {
  width: 400px;
  margin: 0 auto;
}
.container_button {
  margin-top: 5px;
}
.slide_btn {
  width: 50px;
  height: 30px;
  border: none;
  color: #ffffff;
  cursor: pointer;
}
#prev_slide {
  float: left;
  background-color: #008CBA;
}
#next_slide {
  float: right;
  background-color: #4CAF50;
}
</style>

V. Kết luận:

Hiện tại các plugin về slideshow khá tốt nên mình vẫn khuyến khích dùng plugin.
Tuy nhiên công việc trong ngành IT không phải ngày nào cũng giống nhau, không phải lúc nào khách hàng cũng yêu cầu 1 cái slideshow bình thường.
Sẽ có lúc khách hàng đưa ra những yêu cầu đặc biệt ví dụ như slideshow đôi, hoặc 1 slideshow có vài trăm ảnh yêu cầu dùng ajax, lazy loading để chạy tới đâu load tới đó, trong trường hợp đó thì việc có những kiến thức cơ bản sẽ giúp chúng ta xoay sở tốt hơn.