Testimonials Slider là một tính năng mạnh mẽ giúp bạn dễ dàng trưng bày các lời chứng thực từ khách hàng trên trang web của mình. Với khả năng trình chiếu tự động và điều hướng mượt mà, Testimonials Slider không chỉ tối ưu hóa không gian hiển thị mà còn tăng cường sự tin tưởng và tương tác của người dùng. Tính năng này là một công cụ lý tưởng để xây dựng uy tín thương hiệu và thúc đẩy khách hàng tiềm năng thực hiện hành động trên trang web của bạn
Code Mẫu Tính Năng Testimonials Slider.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testimonials Slider</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
h1 {
text-align: center;
color: #333;
}
.testimonial-slider {
max-width: 800px;
margin: 40px auto;
position: relative;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.testimonial {
display: none;
padding: 40px;
text-align: center;
background-color: #fff;
}
.testimonial.active {
display: block;
}
.testimonial p {
font-size: 18px;
color: #555;
margin-bottom: 20px;
}
.testimonial h3 {
font-size: 22px;
color: #333;
margin-bottom: 10px;
}
.testimonial h4 {
font-size: 16px;
color: #777;
margin-bottom: 0;
}
.slider-nav {
text-align: center;
margin-top: 20px;
}
.slider-nav span {
cursor: pointer;
height: 10px;
width: 10px;
margin: 0 5px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.3s;
}
.slider-nav span.active {
background-color: #007bff;
}
</style>
</head>
<body>
<h1>Những Điều Khách Hàng Nói</h1>
<div class="testimonial-slider">
<div class="testimonial active">
<p>"
Gỗ ghép giá rẻ chất lượng cao, phù hợp với nhu cầu sản xuất bàn ghế học sinh & bàn ghế cafe với giá rẻ
."</p>
<h3>Mộc Gia Đình</h3>
<h4>CEO</h4>
</div>
<div class="testimonial">
<p>"
Gỗ ghép tràm Solid của quý công ty là lựa chọn tuyệt vời trong sản xuất các loại khay thớt gỗ
."</p>
<h3>Xưởng Thớt Gỗ</h3>
<h4>Marketing Director</h4>
</div>
<div class="testimonial">
<p>"
Gỗ tràm xẻ sấy mặt 100 - 140mm chất lượng cao, thẳng đẹp rất phù hợp dùng sản xuất các loại sàn gỗ xuất khẩu
."</p>
<h3>Xưởng Mộc Nội Ngoại Thất </h3>
<h4>Boss</h4>
</div>
</div>
<div class="slider-nav">
<span class="active"></span>
<span></span>
<span></span>
</div>
<script>
const testimonials = document.querySelectorAll('.testimonial');
const navDots = document.querySelectorAll('.slider-nav span');
let currentSlide = 0;
function showSlide(index) {
testimonials.forEach((testimonial, i) => {
testimonial.classList.remove('active');
navDots[i].classList.remove('active');
});
testimonials[index].classList.add('active');
navDots[index].classList.add('active');
}
function nextSlide() {
currentSlide = (currentSlide + 1) % testimonials.length;
showSlide(currentSlide);
}
navDots.forEach((dot, i) => {
dot.addEventListener('click', () => {
currentSlide = i;
showSlide(currentSlide);
});
});
// Tự động chuyển slide mỗi 5 giây
setInterval(nextSlide, 5000);
</script>
</body>
</html>
LỢI ÍCH & TÍNH NĂNG :
Lợi ích :
Tăng cường sự tin tưởng: Testimonials Slider giúp trưng bày các lời chứng thực tích cực từ khách hàng, tạo sự tin tưởng và uy tín cho sản phẩm hoặc dịch vụ của bạn.
Tăng tương tác người dùng: Trình chiếu tự động và điều hướng dễ sử dụng khiến khách hàng ở lại lâu hơn trên trang web, đồng thời khuyến khích họ tương tác với nội dung.
Tối ưu hóa không gian: Cho phép hiển thị nhiều lời chứng thực trên cùng một không gian mà không làm rối mắt hoặc gây quá tải thông tin cho người dùng.
Tính năng :
Trình chiếu tự động: Testimonials tự động chuyển đổi sau mỗi vài giây, giúp người dùng xem qua nhiều phản hồi mà không cần thao tác.
Điều hướng thủ công: Người dùng có thể chọn trực tiếp testimonial mà họ muốn xem bằng cách nhấp vào các chấm điều hướng.
Hiệu ứng chuyển đổi mượt mà: Testimonials chuyển đổi một cách mềm mại, tạo trải nghiệm trực quan và chuyên nghiệp.
Thiết kế responsive: Phù hợp với mọi kích thước màn hình, đảm bảo trải nghiệm tốt trên cả máy tính để bàn và thiết bị di động.
Kết Luận & Nhận Xét :
Code Mẫu này giúp bạn tạo ra một phần slider lời chứng thực chuyên nghiệp và thu hút, từ đó tăng sự tin tưởng của khách hàng đối với sản phẩm và dịch vụ của bạn.
HIỂN THỊ CODE :
Những Điều Khách Hàng Nói
