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
  1. 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).
  2. Tạo nội dung cho thân slide
  3. Thêm chút code CSS để làm đẹp, căn chỉnh vị trí các đối tượng
  4. 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,…
  5. Xong!

Cách tạo slideshow chi tiết

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

- Bài viết liên quan dành cho bạn -

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:

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:

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

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é.

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!

Subscribe
Notify of
guest
0 Bình luận
Inline Feedbacks
View all comments