Fullscreen Video Slideshow with BigVideo.js



Đầu tiên, chúng ta hãy đánh dấu cho trang:

Chúng tôi sẽ làm trên trung tâm của màn hình, chúng tôi có một div wrapper có chứa tất cả các màn hình khác nhau. Sau đó, có một nút chúng tôi sẽ sử dụng để di chuyển giữa các màn hình.


<header> <h1>Fullscreen Video Slideshow <span>with BigVideo.js</span></h1> <p>The videos in this demo are from <a href='http://beachfrontprod.blogspot.com' target='_blank'>Beachfront B-Roll</a>, a great place to download unique HD stock video footage and animated backgrounds for any production purpose (for free!).</p> <p><small>A demo for</small> <a href='http://dfcb.github.com/BigVideo.js/' target='_blank'>BigVideo.js</a> <small>by <a href='http://twitter.com/johnpolacek' target='_blank' rel='author'>@johnpolacek</a></small></p></header> <div class='wrapper'> <div class='screen' id='screen-1' data-video='vid/bird.mp4'> <img src='img/bird.jpg' class='big-image' /> <h1 class='video-title'>#1 Bird</h1> </div> <div class='screen' id='screen-2' data-video='vid/satellite.mp4'> <img src='img/satellite.jpg' class='big-image' /> <h1 class='video-title'>#2 Satellite</h1> </div> <div class='screen' id='screen-3' data-video='vid/camera.mp4'> <img src='img/camera.jpg' class='big-image' /> <h1 class='video-title'>#3 Camera</h1> </div> <div class='screen' id='screen-4' data-video='vid/spider.mp4'> <img src='img/spider.jpg' class='big-image' /> <h1 class='video-title'>#4 Spider</h1> </div> <div class='screen' id='screen-5' data-video='vid/dandelion.mp4'> <img src='img/dandelion.jpg' class='big-image' /> <h1 class='video-title'>#5 Dandelion</h1> </div></div> <nav id='next-btn'> <a href='#' class='next-icon'></a></nav>

TIN LIÊN QUAN

Photo Booth Strips with Lightbox

Băng ảnh đứng đẹp mắt với Lightbox 2 di chuyển bằng cách lăn bi với phong cách lạ với 'Photo Booth Strips with Lightbox'

BookBlock: A Content Flip Plugin

Một plugin jQuery mà sẽ tạo ra một thành phần giống như cuốn sách nhỏ cho phép bạn điều hướng thông qua các mục của nó bằng cách đảo các trang với hiệu ứng (BookBlock: A Content Flip Plugin )

Creative Web Typography Styles

Với một chút CSS ma thuật, chúng ta có thể chuyển đổi văn bản vào kiểu chữ rất đẹp và bỏ qua việc sử dụng các hình ảnh trong nhiều trường hợp

Old School Cassette Player with HTML5 Audio

Vintage định dạng đáp ứng công nghệ web hiện đại: máy nghe nhạc âm thanh HTML5 với các điều khiển thực tế. Hôm nay chúng tôi muốn chia sẻ một máy nghe nhạc âm thanh với giao diện trông giống như một băng nhạc trường học cũ.

THỦ THUẬT HAY

Mách bạn cách kiểm tra bảo hành CPU AMD chính hãng từ A đến Z

Bài viết sẽ hướng dẫn bạn kiểm tra bảo hành CPU AMD cũng như những chính sách bảo hành CPU AMD chi tiết để bạn tiện theo dõi, ghi nhớ và đảm bảo quyền lợi của bản thân khi mua hàng.

Triển khai kích hoạt KMS(Phần 1)

Nếu môi trường mạng của bạn hỗ trợ giao thức cập nhật động DNS và cho phép các máy tính tự động xuất bản các service, việc triển khai KMS host có thể sẽ chỉ cần rất ít nỗ lực.

Thunderbird - Ngăn chặn tải những tệp tin dung lượng lớn

Hưỡng dẫn cấu hình hòm thư Thunderbird ngăn chặn tải file lưu trữ quá lớn

Hướng dẫn cách khắc phục khi iPhone bị treo iTunes

Tình trạng iPhone bị treo iTunes không còn là chuyện gì mới lạ mỗi khi nâng cấp lên iOS phiên bản mới. Vậy làm thế nào để khắc phục khi iPhone bị treo iTunes.

Cách khôi phục dữ liệu đã xóa trên OneDrive

Là một trong những ứng dụng lưu trữ trực tuyến phổ biến hiện nay, OneDrive giúp người dùng lưu trữ và quản lý dữ liệu miễn phí tới 15GB. Đặc biệt, người dùng hoàn toàn có thể lấy những dữ liệu đã xóa trên OneDrive bằng

ĐÁNH GIÁ NHANH

So sánh iPhone 13 mini và iPhone 13: Đâu là mẫu điện thoại phù hợp với bạn?

iPhone 13 mini và iPhone 13 sở hữu nhiều ưu điểm giống nhau, nhất là mức giá phải chăng thì đâu mới là thiết bị phù hợp với bạn, tham khảo bên dưới nhé!

Đánh giá xe Hyundai Tucson Turbo 2017 lắp ráp: Mẫu crossover đáng gờm

Với 950 triệu đồng bỏ ra, bạn sẽ cảm thấy hài lòng khi sở hữu Hyundai Tucson Turbo 2017. Một mẫu xe cân bằng được các yếu tố: Phong cách, cảm giác lái, tiện nghi, an toàn và khả năng tiết kiệm nhiên liệu.