👋 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()">◁</div> <div class="next" onclick="nextSlide()">▷</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ẻ