Tạo Slideshow chuyên nghiệp với HTML, CSS và Javascript

Bài viết này Lập Trình Không Khó (LTKK) sẽ hướng dẫn các bạn cách triển khai code để tạo slideshow bằng Javascript. Tất nhiên chúng ta sẽ code chay từ đầu đến cuối để các bạn có thể hiểu được ý tưởng để code slideshow ảnh theo ý muốn.

Việc tạo slide ảnh bằng Javascript đòi hỏi chúng ta cần có kỹ năng lập trình web bao gồm HTML, CSS và đặc biệt là Javascript. Bởi vì các hiệu ứng chuyển động, phản hồi tương tác của người dùng thì chúng ta cần tới sự giúp đỡ của JS.

Ý tưởng tạo slideshow

Có rất nhiều cách khác nhau để tạo ra slideshow bằng Javascript. Do vậy, bài này mình sẽ chỉ trình bày ý tưởng mà mình sẽ hướng dẫn các bạn. Sau khi hiểu ý tưởng của mình thì các bạn cũng có thể tự tạo ra kịch bản cho riêng mình.

Dưới đây là hình ảnh của một slide, bao gồm: ảnh, tiêu đề, mô tả, và một button trên mỗi slide.

Cách tạo slideshow với HTML, CSS và JS — Đối tượng slideshow trong sản phẩm của chúng ta

Tạo 3 thẻ div tương ứng 3 thành phần: nút bấm chuyển slide trước, nút bấm chuyển slide tiếp theo và thân của slider (phần hiển thị ảnh và nội dung slide).
Tạo nội dung cho thân slide
Thêm chút code CSS để làm đẹp, căn chỉnh vị trí các đối tượng
Thêm code JS cho các sự kiện: tự động chuyển slide, chuyển slide khi có điều hướng của người dùng, hiệu ứng khi chuyển slide,…
Xong!

Cách tạo slideshow chi tiết

Bước 1: Tạo 3 thành phần thẻ `div`

<div id="mySlider"></div>
<div id="sliderNav">
  <div id="sliderPrev" onclick="prevSlide();"><img src="https://nguyenvanhieu.vn/wp-content/uploads/2020/09/left-arrow.png"></div>
  <div id="sliderNext" onclick="nextSlide();"><img src="https://nguyenvanhieu.vn/wp-content/uploads/2020/09/right-arrow.png"></div>
</div>

Bước 2: Tạo nội dung cho thân của slide

Bước này mình sẽ sử dụng JS để tạo ra các đối tượng slide và lưu chúng vào một mảng. Việc sử dụng JS để làm phần này sẽ có những ưu điểm sau:

Có thể linh hoạt quản các slide qua các tham số được cấu hình sẵn
Sử dụng ảnh slide ở dạng background-image, ẩn chuột phải mở ảnh sang tab mới
Quản lý theo kiểu hướng đối tượng

Cụ thể chúng ta sẽ cài đặt như sau:

// Mỗi slide sẽ có một chỉ số của riêng nó, để đơn giản chúng ta sẽ gán chỉ số mảng cho các slide
var slideIndex = 0;
// Cho ta biết chúng ta đang ở slide nào
var currentSlideIndex = 0;
// Mảng lưu các slide của chúng ta
var slideArray = [];

// Hàm này sẽ giúp chúng ta tạo ra các đối tượng slide
// bao gồm: tiêu đề, mô tả, ảnh, đường dẫn khi nhấp vào button trên slide, 
// và id của mỗi slide
function Slide(title, subtitle, background, link) {
  this.title = title;
  this.subtitle = subtitle;
  this.background = background;
  this.link = link;
  // we need an id to target later using getElementById
  this.id = "slide" + slideIndex;
  // Add one to the index for the next slide number
  slideIndex++;
  // Add this Slide to our array
  slideArray.push(this);
}


// Tạo các đối tượng slide, bạn có thể tạo nhiều hơn

var walkingDead = new Slide(
  "The Walking Dead",
  "A show about fighting zombies",
  "https://acollectivemind.files.wordpress.com/2013/12/season-4-complete-cast-poster-the-walking-dead-the-walking-dead-35777405-2528-670.png",
  "http://www.amc.com/shows/the-walking-dead"
);

var bigBang = new Slide(
  "The Big Bang Theory",
  "A show about Sheldon",
  "https://www.denofgeek.com/wp-content/uploads/2019/02/tbbt_12-15.jpg",
  "http://www.cbs.com/shows/big_bang_theory/"
);

var LastMan = new Slide(
  "The Last Man on Earth",
  "A show about loneliness",
  "https://www.wired.com/wp-content/uploads/2015/02/LMOE-AliveInTuscon_scene44_0028_hires2.jpg",
  "http://www.fox.com/the-last-man-on-earth"
);

// Từ mảng slide đã tạo, ta tiến hành đưa nó vào source HTML
function buildSlider() {
  // A variable to hold all our HTML
  var myHTML;

  // Go through the Array and add the code to our HTML
  for (var i = 0; i < slideArray.length; i++) {
    myHTML +=
      "<div id='" +
      slideArray[i].id +
      "' class='singleSlide' style='background-image:url(" +
      slideArray[i].background +
      ");'>" +
      "<div class='slideOverlay'>" +
      "<h1>" +
      slideArray[i].title +
      "</h1>" +
      "<h4>" +
      slideArray[i].subtitle +
      "</h4>" +
      "<a href='" +
      slideArray[i].link +
      "' target='_blank'>Open Link</a>" +
      "</div>" +
      "</div>";
  }

  // Đưa HTML chúng ta vừa tạo vào id #mySlider
  document.getElementById("mySlider").innerHTML = myHTML;

  // Đồng thời hiển thị slide đầu tiên
  document.getElementById("slide" + currentSlideIndex).style.left = 0;
}

// Gọi hàm thực thi
buildSlider();

[sc_quote]Dành cho bạn: Làm form đăng nhập cực kỳ đẹp với Bootstrap [/sc_quote]

Bước 3. Thêm CSS cho slideshow

Các công việc chúng ta cần làm trong bước này bao gồm:

Căn chỉnh các đối tượng tiêu đề slide, mô tả của slide, button trên slide, 2 nút chuyển slide (prev, next) và slide của chúng ta.
Chuyển slide và hiệu ứng chuyển sử dụng CSS3 (Các thành phần CSS3 mình sẽ giải thích thêm phía dưới)

Code CSS cho các công việc kể trên để tạo slideshow đẹp như sau:

body {
  text-align: center;
  font-size: 18px;
  background-size: cover;
  color: #fff;
  font-family: sans-serif;
  margin: 0;
  padding-top: 0;
}

h1 {
  font-size: 48px;
}

h4 {
  font-size: 24px;
}

a {
  padding: 10px 25px;
  background-color: #4ca74c;
  color: #fff;
  border-radius: 25px;
  text-decoration: none;
}

#mySlider {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 300px;
}

.singleSlide {
  background-size: cover;
  height: 300px;
  position: absolute;
  left: 100%;
  width: 100%;
  top: 0px;
}

.slideOverlay {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 50px;
}

#sliderNav {
  position: relative;
  top: -175px;
}

#sliderNav:hover {
  cursor: pointer;
}

#sliderPrev {
  position: relative;
  float: left;
  left: 50px;
}

#sliderNext {
  position: relative;
  float: right;
  right: 50px;
}

#sliderNext img,
#sliderPrev img {
  width: 32px;
}

@-webkit-keyframes slideIn {
  100% {
    left: 0;
  }
}

@keyframes slideIn {
  100% {
    left: 0;
  }
}

.slideInRight {
  left: -100%;
  -webkit-animation: slideIn 1s forwards;
  animation: slideIn 1s forwards;
}

.slideInLeft {
  left: 100%;
  -webkit-animation: slideIn 1s forwards;
  animation: slideIn 1s forwards;
}

@-webkit-keyframes slideOutLeft {
  100% {
    left: -100%;
  }
}

@keyframes slideOutLeft {
  100% {
    left: -100%;
  }
}

.slideOutLeft {
  -webkit-animation: slideOutLeft 1s forwards;
  animation: slideOutLeft 1s forwards;
}

@-webkit-keyframes slideOutRight {
  100% {
    left: 100%;
  }
}

@keyframes slideOutRight {
  100% {
    left: 100%;
  }
}

.slideOutRight {
  -webkit-animation: slideOutRight 1s forwards;
  animation: slideOutRight 1s forwards;
}

Lưu ý: Mình có set giá trị width, height cho #mySlider, bạn có thể sửa lại kích thước nếu muốn!

Một số giải thích các thành phần CSS3:

Dòng CSS `@keyframes slideIn` định nghĩa một chuyển động, đưa slide về sát lề trái của trang web. Tiền tố webkit là dành cho trình duyệt Chrome (Xem link này)
`animation`: Tạo chuyển động (animation), xem thêm tại đây. `animation: slideOutLeft 1s forwards;` có nghĩa là chuyển slide trong vòng 1 giây. forwards là 1 giá trị của `animation-fill-mode`, xem tại đây.

Bước 4. Tạo các sự kiện với Javascript

// Xử lý bấm nút chuyển slide trước đó
function prevSlide() {
  // Tìm slide trước đó
  var nextSlideIndex;
  // Nếu chỉ số slide là 0, về slide cuối
  if (currentSlideIndex === 0) {
    nextSlideIndex = slideArray.length - 1;
  } else {
    // Nếu không thì giảm chỉ số đi 1
    nextSlideIndex = currentSlideIndex - 1;
  }

  // Ẩn slide hiện tại, hiện slide "currentSlideIndex"
  document.getElementById("slide" + nextSlideIndex).style.left = "-100%";
  document.getElementById("slide" + currentSlideIndex).style.left = 0;

  // Thêm class để chuyển slide có animation đã định nghĩa ở bước 3
    document
    .getElementById("slide" + nextSlideIndex)
    .setAttribute("class", "singleSlide slideInLeft");
  document
    .getElementById("slide" + currentSlideIndex)
    .setAttribute("class", "singleSlide slideOutRight");

  // Cập nhật giá trị slide hiện tại
  currentSlideIndex = nextSlideIndex;
}

// Xử lý bấm nút chuyển slide tiếp theo
// Cách xử lý tương tự như prevSlide đã trình bày ở trên
function nextSlide() {
  var nextSlideIndex;
  if (currentSlideIndex === slideArray.length - 1) {
    nextSlideIndex = 0;
  } else {
    nextSlideIndex = currentSlideIndex + 1;
  }

  document.getElementById("slide" + nextSlideIndex).style.left = "100%";
  document.getElementById("slide" + currentSlideIndex).style.left = 0;

  document
    .getElementById("slide" + nextSlideIndex)
    .setAttribute("class", "singleSlide slideInRight");
  document
    .getElementById("slide" + currentSlideIndex)
    .setAttribute("class", "singleSlide slideOutLeft");

  currentSlideIndex = nextSlideIndex;
}

Kết quả cuối cùng

Các bạn có thể tham khảo kết quả tạo slideshow bằng Javascript và source code qua demo này!

See the Pen
Pure JavaScript Image Slider by Hieu Nguyen (@hieunv1996)
on CodePen.

Tạo slideshow với Bootstrap

Nếu bạn đang sử dụng Bootstrap thì quá trình này đơn giản hơn nhiều bởi vì thư viện này hỗ trợ chúng ta rất nhiều. Bạn có thể dễ dàng tạo slideshow với kết quả tương tự như trên chỉ với số ít dòng code như dưới đây.

Lưu ý: Đổi đường dẫn ảnh thành ảnh của bạn để việc tạo slideshow của chúng ta không bị lỗi nhé.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Carousel Example</h2>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">

      <div class="item active">
        <img src="la.jpg" alt="Los Angeles" style="width:100%;">
        <div class="carousel-caption">
          <h3>Los Angeles</h3>
          <p>LA is always so much fun!</p>
        </div>
      </div>

      <div class="item">
        <img src="chicago.jpg" alt="Chicago" style="width:100%;">
        <div class="carousel-caption">
          <h3>Chicago</h3>
          <p>Thank you, Chicago!</p>
        </div>
      </div>
    
      <div class="item">
        <img src="ny.jpg" alt="New York" style="width:100%;">
        <div class="carousel-caption">
          <h3>New York</h3>
          <p>We love the Big Apple!</p>
        </div>
      </div>
  
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

</body>
</html>

Source code tham khảo: https://www.w3schools.com/bootstrap/bootstrap_carousel.asp

Như vậy, bài viết đã hoàn thành việc hướng dẫn các bạn tạo slideshow bằng Javascript và tạo sildeshow bằng Bootstrap. Các bạn có thể tùy chỉnh lại theo ý muốn của mình nhé, hẹn gặp lại các bạn ở bài hướng dẫn tiếp theo!

4.7/5 - (3 bình chọn)

Ý tưởng tạo slideshow

Cách tạo slideshow chi tiết

Bước 1: Tạo 3 thành phần thẻ div

Bước 2: Tạo nội dung cho thân của slide

Bước 3. Thêm CSS cho slideshow

Bước 4. Tạo các sự kiện với Javascript

Kết quả cuối cùng

Tạo slideshow với Bootstrap

Bài viết liên quan

Reader Interactions

Để lại một bình luận Hủy

Bước 1: Tạo 3 thành phần thẻ `div`