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

Tư vấn mua máy tính chơi Game LOL, CF, Fifa

Bạn đang cần mua máy tính max Settings để chơi được hầu hết các game hot hiện nay như LOL, CF, Fifa... Tuy nhiên hiểu biết về phần cứng của bạn lại khá hạn chế và cần đến tư vấn, tham khảo từ nhiều nguồn khác nhau. Vì

Lấy lại mật khẩu Vietinbank bị quên lưu trên máy tính

Mật khẩu Vietinbank dùng để đăng nhập, kiểm tra thông số tài khoản ngân hàng của bạn. Chính vì thế người dùng cần ghi chú mật khẩu để không quên mật khẩu Vietinbank. Nếu không may quên mật khẩu, hãy sử dụng theo cách

Apple và các lỗi bảo mật từ bản cập nhật

Apple đã phát hành phần mềm mới cho iOS và macOS vượt xa các bản sửa lỗi nhỏ, các bản cập nhật đã vá một lỗ hổng bảo mật lớn có thể cho phép tin tặc có toàn quyền kiểm soát thiết bị của bạn.

Cách kích hoạt mạng 4G trên iPhone và đo tốc độ mạng

Nhiều nơi ở Việt Nam đã phủ sóng 4G. Hãy kích hoạt ngay 4G trên chiếc iPhone của bạn để xem thử khu vực của bạn đã có thể sử dụng 4G chưa nhé.

Cách cài đặt tự động xóa ứng dụng trên iPhone nhanh chóng và dễ dàng

Cho dù bạn là người mới sử dụng iPhone, hoặc bạn chưa từng xóa ứng dụng trước đây, đó là một quá trình nhanh và đơn giản. Ngoài ra, việc thiết lập xóa ứng dụng tự động là một cách tuyệt vời để giúp bạn quản lý iPhone

ĐÁNH GIÁ NHANH

Review củ sạc GaN Belkin 65W: Sạc siêu nhanh, Hỗ trợ PD 3.0, 2 cổng Type C

Trong thời đại công nghệ hiện nay, điện thoại, máy tính và các thiết bị di động là một phần không thể thiếu của cuộc sống. Tuy nhiên, việc sạc lại pin có thể là một thách thức đối với nhiều người. Củ sạc GaN Belkin 65W

Đánh giá TV Samsung SUHD 2016: Thiết kế cong, công nghệ HDR

Sau công nghệ hình ảnh 3D, chuẩn HDR được xem là xu hướng mới trên Smart TV. Trước đây công nghệ này được biết đến nhiều trên máy ảnh của smartphone. HRD dần phổ biến...

Đánh giá Samsung Galaxy Buds2 – Tai nghe không dây tuyệt vời cho thế hệ GenZ

Các chuyên gia về công nghệ đều đánh giá Samsung Galaxy Buds2 là mẫu tai nghe không dây tuyệt vời cho các bạn trẻ thế hệ GenZ. Với các ưu điểm vượt trội như: đa dạng về màu sắc, nhiều tính năng hay ho và giá bán mềm,