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

Xây dựng một Slideshow đơn giản với HTML, CSS và Javascript

Slideshow hoặc slider là một phần không thể thiếu trong các trang web hiện nay. Chúng giúp chúng ta hiển thị những hình ảnh lớn kích thước và trượt qua lại giữa các ảnh. Thường thì chúng được đặt ở đầu trang để mang lại sự chú ý cho những nội dung đặc biệt của trang. Trong bài viết này, chúng ta sẽ cùng nhau tạo ra một Slideshow đơn giản với sự hỗ trợ của HTML, CSS và Javascript.

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

Đầu tiên, chúng ta cần sẵn sàng các hình ảnh để hiển thị. Hãy tạo một thư mục "images" và chép 3 hình ảnh có tên slide-1.jpg, slide-2.jpg và slide-3.jpg vào đó.

Tiếp theo, chúng ta sẽ xây dựng giao diện cho trang web. Hãy tạo một file index.html cùng cấp với thư mục "images" để chạy trang web. Sau đó, sử dụng đoạn code dưới đây để tạo ra các thành phần của Slideshow:

  

    
  

  

    
  

  

    
  

  ❮
  ❯






  
  
  

Trong đoạn mã trên, chúng ta đã xây dựng một khung container để chứa các slide hình ảnh. Các nút "previous" và "next" sẽ giúp chuyển đổi giữa các slide. Bên dưới khung container, chúng ta có một dãy chấm đại diện cho các slide.

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ẽ sử dụng CSS để định dạng các thành phần của Slideshow. Hãy thêm đoạn code CSS sau vào phần

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

3. Xử lý bằng Javascript

Hãy thêm đoạn code Javascript sau vào phần

Trong đoạn code trên, chúng ta khai báo một biến slideIndex để xác định slide hiện tại đang được hiển thị. Hàm showSlides() sẽ chuyển đổi giữa các slide và hàm currentSlide(n) sẽ được gọi khi người dùng nhấn vào chấm để chuyển đến slide tương ứng.

Quá trình hoạt động của trang web sẽ như sau:

• Khi trang web được tải, hàm showSlides() sẽ tự động được gọi với giá trị ban đầu của biến slideIndex là 0. Hàm này sẽ hiển thị slide đầu tiên và tăng giá trị của slideIndex lên một đơn vị. Sau đó, nếu không có thao tác gì, chúng ta sử dụng setTimeout(showSlides, 5000); để tự động chuyển slide sau mỗi 5 giây. Khi này, slideIndex sẽ là 1 và quá trình này sẽ được lặp lại.
• Nếu người dùng nhấn vào các chấm, hàm currentSlide(n) sẽ được gọi với tham số n là số thứ tự của slide muốn chuyển đến. Đầu tiên, chúng ta gán slideIndex bằng n và sau đó gọi hàm showSlides().

4. Lời kết

Vậy là chúng ta đã hoàn thành việc xây dựng một Slideshow đơn giản. Từ bài viết này, hy vọng bạn đã nắm được cách hoạt động của Slideshow và có thể tùy chỉnh nó cho phù hợp với trang web của bạn.

Nếu bạn có bất kỳ thắc mắc nào, hãy để lại bình luận. Hẹn gặp lại trong các bài viết tiếp theo trên freetuts.net.

Tham khảo: w3schools.com