[HTML] Tự làm 1 slider đơn giản để ảnh người yêu hoặc quảng bá sản phẩm

👋 Chào các bác,

Nay em sẽ hướng dẫn các bác tự làm 1 slider cơ bản với html, css, js (nhìn chung các bác chỉ cần 1 file html và 1 tâm hồn đẹp ))

Thôi mình vào việc luôn nào :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Slider</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #000;
            color: #fff;
            font-family: 'Arial', sans-serif;
        }

        .slider-container {
            position: relative;
            overflow: hidden;
        }

        .slider {
            display: inline-flex;
            transition: transform 0.5s ease-in-out;
        }

        .slide {
            width: 100vw;
            box-sizing: border-box;
            text-align: center;
            padding: 20px;
        }

        img {
            width: 60%;
            border: 4px solid #fff;
        }

        .slide-content {
            margin-top: 20px;
        }

        .controls {
            position: fixed;
            top: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            font-size: 30px;
            cursor: pointer;
        }

        .prev,
        .next {
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="slider-container">
        <div class="slider">
            <div class="slide" id="slide1">
                <img src="girl1.jpg" alt="Image 1">
                <div class="slide-content">
                    <h2>Ảnh 1</h2>
                    <p>Sóng bắt đầu từ gió 1</p>
                </div>
            </div>
            <div class="slide" id="slide2">
                <img src="girl2.jpg" alt="Image 2">
                <div class="slide-content">
                    <h2>Ảnh 2</h2>
                    <p>Gió bắt đầu từ bão 2</p>
                </div>
            </div>
            <div class="slide" id="slide3">
                <img src="girl3.jpg" alt="Image 3">
                <div class="slide-content">
                    <h2>Ảnh 3</h2>
                    <p>Bão bắt đầu từ khi em đến 3</p>
                </div>
            </div>
        </div>
        <div class="controls">
            <div class="prev" onclick="prevSlide()">&#9665;</div>
            <div class="next" onclick="nextSlide()">&#9655;</div>
        </div>
    </div>

    <script>
        let currentIndex = 0;

        function showSlide(index) {
            const slider = document.querySelector('.slider');
            const slides = document.querySelectorAll('.slide');
            if (index < 0) {
                index = slides.length - 1;
            } else if (index >= slides.length) {
                index = 0;
            }
            currentIndex = index;
            const translateValue = -index * 100 + 'vw';
            slider.style.transform = 'translateX(' + translateValue + ')';
        }

        function nextSlide() {
            showSlide(currentIndex + 1);
        }

        function prevSlide() {
            showSlide(currentIndex - 1);
        }

        // Initial setup
        document.addEventListener('DOMContentLoaded', function () {
            showSlide(currentIndex);
        });
    </script>
</body>
</html>

Mục slider các bác có thể để ảnh tùy thích (ảnh người yêu, ảnh sản phẩm, ...) Em đính kèm sẵn 3 ảnh mẫu các bác có thể tải về test thử (các bác nhớ đổi tên ảnh thành girl1.png, girl2.png và girl3.png) :

Chúc các bác code vui vẻ

Mục lục