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

Độ pô phạt bao nhiêu tiền? Có bị thu bằng lái?

Độ pô xe máy đã là thú chơi xe của dân chơi nhiều năm nay. Vậy trường hợp độ pô xe máy phạt bao nhiêu và có bị tước Giấy phép lái xe hay không? Cùng trangcongnghe.vn tìm hiểu nhé.

Tải game dò mìn cho Windows 10, 8 Minesweeper

Bạn yêu thích tựa game dò mìn kinh điển có sẵn trên các phiên bản Windows trước đây như Windows XP, Windows 7. Tuy nhiên với các phiên bản mới như Windows 10. 8.1 và Windows 8 thì các tựa game này đã bị Microsoft loại

Hưỡng dẫn bật tắt Micro(Mic) trên Windows 10

Bản nâng cấp miễn phí Windows 10 có sẵn cho mọi người, nhưng lại tắt micro trong PC. Với những người dùng muốn khắc phục sự cố, hãy xem xét các giải pháp sau.

Chia sẻ File và phát Video giữa máy tính và Android

Bạn đang muốn truy cập và sử dụng File hoặc video chứa trong máy tính Window hoặc Laptop của bạn ngay trên Tablet Android để xem phim, video clip hoặc tài liệu. Với ứng dụng ES File Explorer sẽ là giải pháp hữu ích cho

Hưỡng dẫn cách ẩn, hiển thị thanh taskbar trên Windows

Với thanh Taskbar chúng ta có thể làm được rất nhiều việc, và không thể phủ nhật một điều đó là thanh Taskbar thật sự rất tuyệt vời vì nó giúp chúng ta có thể quản lý được các chương trình một cách dễ dàng và nhanh

ĐÁNH GIÁ NHANH

Đánh giá Asus A556U: Hiệu năng ổn định, màn hình lớn và âm thanh chất lượng

Là sản phẩm đại diện cho serie A mới ra mắt của Asus, A556 có những tính năng và hiệu năng như thế nào. Hãy cũng FPTShop tìm hiểu qua bài đánh giá hôm nay

Đánh giá nhanh ThinkPad X1 Tablet: ThinkPad X1 Gen 3 - một đối thủ xứng tầm của Surface

Là một chiếc ThinkPad, X1 Tablet sở hữu màu đen truyền thống với chất liệu cao cấp. Thiết kế của ThinkPad X1 Tablet dường như học hỏi khá nhiều từ chiếc Surface Pro 4 của Microsoft.