Cách làm Video Slider đơn giản
Trong phần giới thiệu này, chúng ta sẽ khám phá cách tạo một video slider
đơn giản bằng HTML, CSS và JavaScript. Video slider là một cách tuyệt vời để
trình bày nhiều video trong một không gian hẹp, giúp tăng tính tương tác và
thú vị cho người xem. Chúng ta sẽ tìm hiểu cách sử dụng các ngôn ngữ lập
trình cơ bản để xây dựng một slider có khả năng chuyển đổi qua lại giữa các
video một cách mượt mà và hấp dẫn.
Trong phần hướng dẫn này, chúng ta sẽ bắt đầu từ việc tạo cấu trúc cơ bản
bằng HTML, sau đó sẽ tùy chỉnh giao diện bằng CSS để slider trở nên thẩm mỹ
và phù hợp với giao diện tổng thể của trang web. Cuối cùng, chúng ta sẽ sử
dụng JavaScript để tạo hiệu ứng chuyển đổi giữa các video và thêm tính năng
điều khiển slider.
Hãy cùng bắt đầu khám phá cách tạo video slider và thúc đẩy sự sáng tạo của
bạn!
Cấu trúc thư mục:
Bước 1: Thêm HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Slider</title>
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<section>
<video id="slider" autoplay muted loop>
<source src="./assets/video/video4.mp4" type="video/mp4">
</video>
<ul class="navigation">
<li><img src="./assets/img/thumbnail1.png" alt="thumbnail1"></li>
<li><img src="./assets/img/thumbnail2.png" alt="thumbnail2"></li>
<li><img src="./assets/img/thumbnail3.png" alt="thumbnail3"></li>
<li><img src="./assets/img/thumbnail4.png" alt="thumbnail4"></li>
</ul>
</section>
</body>
<script src="./assets/js/main.js"></script>
</html>
Bước 2: Thêm CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
section {
position: relative;
width: 100%;
height: 100vh;
}
section video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
section .navigation {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
z-index: 100;
display: flex;
justify-content: center;
align-items: center;
}
section .navigation li {
list-style: none;
cursor: pointer;
margin: 0 10px;
border-radius: 4px;
background-color: #fff;
padding: 3px 3px 0;
opacity: 0.7;
}
section .navigation li img {
width: 120px;
transition: 0.3s;
}
section .navigation li img:hover {
width: 150px;
}
Bước 3: Thêm Javascript
const videoList = document.querySelectorAll('.navigation li')
videoList.forEach((item, index) => {
item.onclick = () => {
document.querySelector('#slider').src = `./assets/video/video${index + 1}.mp4`
}
})
Full tutorial:
Hoàn thành
Kết thúc hướng dẫn này, hy vọng bạn đã có cái nhìn tổng quan về cách tạo một
video slider đơn giản bằng HTML, CSS và JavaScript. Bằng cách áp dụng những
kiến thức bạn đã học, bạn có thể tạo ra những trải nghiệm đa phương tiện hấp
dẫn và độc đáo trên trang web của mình. Việc thực hành với các công cụ và
ngôn ngữ lập trình cơ bản như HTML, CSS và JavaScript sẽ giúp bạn nâng cao
kỹ năng của mình và khám phá thêm nhiều ý tưởng sáng tạo khác.
Hãy thử tạo và tùy chỉnh video slider theo ý muốn của bạn, đồng thời không
ngừng nâng cao khả năng lập trình của mình. Đừng ngần ngại thử nghiệm và
khám phá, vì điều đó sẽ giúp bạn phát triển sự sáng tạo và kỹ năng lập trình
của mình một cách liên tục.
Chúc bạn may mắn trên hành trình tạo ra những trải nghiệm độc đáo và ấn
tượng!
Các bài viết liên quan:
