Beautiful testimonial with slide
“This product has greatly improved my workflow. Highly recommended!”
John Doe
Software Engineer
“Fantastic service! I couldn’t ask for better customer support.”
Jane Smith
Project Manager
“A seamless experience from start to finish. Five stars!”
Emily Johnson
Marketing SpecialistHtml , CSS and java combined code
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Testimonial Slider with Images</title>
<style>
/* Basic Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
/* Container Styling */
.testimonial-container {
width: 100%;
max-width: 600px;
margin: 50px auto;
overflow: hidden;
text-align: center;
position: relative;
}
/* Slider Styling */
.testimonial-slider {
display: flex;
transition: transform 0.5s ease;
}
/* Individual Testimonial Styling */
.testimonial {
min-width: 100%;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 10px;
background-color: #f9f9f9;
margin: 20px 0;
}
/* Content within each testimonial */
.testimonial p {
font-size: 1rem;
color: #555;
margin-bottom: 15px;
}
.testimonial h3 {
font-size: 1.2rem;
color: #333;
}
.testimonial span {
font-size: 0.9rem;
color: #777;
}
/* Image Styling */
.testimonial img {
width: 180px;
height: 180px;
border-radius: 50%;
margin-bottom: 15px;
}
/* Navigation buttons */
.nav-buttons {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
}
.nav-buttons button {
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
border: none;
border-radius: 5px;
background-color: #333;
color: #fff;
transition: background-color 0.3s ease;
}
.nav-buttons button:hover {
background-color: #555;
}
</style>
</head>
<body>
<div class=”testimonial-container”>
<div class=”testimonial-slider”>
<!– Testimonial 1 –>
<div class=”testimonial”>
<img src=”imaget.jpg” alt=”John Doe”>
<p>“This product has greatly improved my workflow. Highly recommended!”</p>
<h3>John Doe</h3>
<span>Software Engineer</span>
</div>
<!– Testimonial 2 –>
<div class=”testimonial”>
<img src=”imaget.jpg” alt=”Jane Smith”>
<p>“Fantastic service! I couldn’t ask for better customer support.”</p>
<h3>Jane Smith</h3>
<span>Project Manager</span>
</div>
<!– Testimonial 3 –>
<div class=”testimonial”>
<img src=”imaget.jpg” alt=”Emily Johnson”>
<p>“A seamless experience from start to finish. Five stars!”</p>
<h3>Emily Johnson</h3>
<span>Marketing Specialist</span>
</div>
</div>
<!– Navigation Buttons –>
<div class=”nav-buttons”>
<button onclick=”prevSlide()”>Prev</button>
<button onclick=”nextSlide()”>Next</button>
</div>
</div>
<script>
// JavaScript for Testimonial Slider
const slider = document.querySelector(‘.testimonial-slider’);
const testimonials = document.querySelectorAll(‘.testimonial’);
let currentIndex = 0;
function showSlide(index) {
const offset = -index * 100;
slider.style.transform = `translateX(${offset}%)`;
}
function nextSlide() {
currentIndex = (currentIndex + 1) % testimonials.length;
showSlide(currentIndex);
}
function prevSlide() {
currentIndex = (currentIndex – 1 + testimonials.length) % testimonials.length;
showSlide(currentIndex);
}
// Auto-slide functionality
setInterval(nextSlide, 5000); // Slide every 5 seconds
</script>
</body>
</html>