[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()">◁</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ẻ
All Rights Reserved