Cách làm Video Slider đơn giản bằng HTML, CSS và Javascript

Cách làm Video Slider đơn giản

Cách làm Video Slider đơn giản bằng HTML, CSS và Javascript

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:

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:

No comments:

Powered by Blogger.