Hướng dẫn tạo slideshow video bằng Javascript đơn giản cho website

Slideshow video khá là phổ biến trên nhiều website. Họ dùng để trình chiếu các video quảng cáo, du lịch hay các khoá học,… Tuy nghiên chúng ta luôn tò mò về cách mà họ đã tạo ra slideshow video ó là như thế nào. Vậy thì hôm nay mình xin làm một bài hướng dẫn các bạn tạo slideshow video đơn giản bằng Javascript chỉ với 3 bước đơn giản.

Bước 1: Chúng ta tiến hành tạo chia layout cho từng bộ phận của slideshow. Các bạn chèn đoạn code html vào website của mình. Mình sẽ giải thích nó ở dưới.

Mình sẽ giải thích sơ qua cho các bạn hiểu:

  1. Đầu tiên là layout bao ngoài cùng .slide-video nó sẽ bao toàn bộ tất cả các layout con của slideshow.
  2. Trong .slide-video sẽ gồm 2 bộ phận chính đó là:
    1. .play-video: là khu vực chứa video đang chạy.
    2. .slide: chứa danh sách các video nằm trong khu vực để người dùng lựa chọn
  3. Trong phần .item là layout chứa hình ảnh thumbnail của video từ Youtube. Đường link này có dạng: “https://img.youtube.com/vi/<id video youtube>/maxresdefault.jpg

Bước 2: Chúng ta sẽ thêm style cho html ở trên để dễ dàng hình dung. Đây là code css:

Đây là giao diện hoàn chỉnh của slideshow:

Bước 3: Cuối cùng là mình sẽ viểt Javascript cho slide trên hoạt động được:

Đây là thành quả cuối cùng của chúng ta. Chúc các bạn thành công.

 

2
Để lại bình luận

avatar
1 Bình luận chủ đề
1 Trả lời chủ đề
0 Theo dõi
 
Bình luận được thả cảm xúc nhiều nhất
Chủ đề bình luận nóng nhất
2 Tác giả bình luận
phanthanhThành Nguyên Tác giả bình luận gần đây
  Đăng ký theo dõi  
Mới nhất Cũ nhất Voted nhiều nhất
Thông báo về
Thành Nguyên
Người đăng ký

bạn ơi, có code tự tạo slide ảnh cho blog post k bạn?