Responsive, Customizable Client Review & Testimonial UI
Enhance your website with a sleek and fully customizable client review and testimonial UI. Designed to seamlessly adapt to any device, ensuring a perfect fit and optimal user experience across desktops, tablets, and smartphones.
Fully Customizable Client Testimonial UI
Responsive design that fits every device, delivering a seamless user experience.
HTML
<section>
<div class="container">
<div class="g-review-slider">
<div class="g-slides">
<div class="g-slide">
<img src="t1.jpg" />
<p>
"Girfa IT Services transformed our outdated website into a modern, user-friendly platform. Their team understood our vision and delivered a sleek, responsive design that perfectly represents our brand. We’ve received great feedback from our customers and seen an increase in online inquiries. Highly recommend their web development services!"
</p>
<h4>— Sarah Thompson, Marketing Manager at Bright Solutions</h4>
</div>
<div class="g-slide">
<img src="t2.jpg" />
<p>
Thanks to Girfa IT
Services, our online presence has never been stronger! Their digital marketing
strategies, including SEO and social media campaigns, have significantly
increased our website traffic and lead generation. The team is proactive,
creative, and results-driven. We’re thrilled with the outcomes!
</p>
<h4>David Carter, CEO of GreenWave Technologies</h4>
</div>
<div class="g-slide">
<img src="t3.jpg" />
<p>
Girfa IT Services
is our go-to partner for both web development and digital marketing. They built
a stunning, responsive website for us and continue to boost our online
visibility through targeted digital marketing. Their professionalism,
expertise, and dedication have helped us grow our business. We couldn’t be
happier with their services!
</p>
<h4>Emma Lewis, Founder of FreshBites Café</h4>
</div>
</div>
<button class="prev" onclick="gmoveSlide(-1)">❮</button>
<button class="next" onclick="gmoveSlide(1)">❯</button>
</div>
</div>
</section>
CSS
.g-review-slider {
position: relative;
max-width: 100%;
width: 90%; /* Responsive
width */
margin: auto;
overflow: hidden;
border: 1px solid #ccc;
padding: 20px;
text-align: center;
}
.g-slides {
display: flex;
transition: transform 0.5s ease-in-out;
}
.g-slide {
min-width: 100%;
box-sizing: border-box;
padding: 0 20px; /* Add padding for better spacing
on small screens */
}
.g-slide img {
border-radius:50%;
}
.g-review-slider button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
z-index: 10; /* Ensure
buttons are above slides */
}
.g-review-slider button.prev {
left: 10px;
}
.g-review-slider button.next {
right: 10px;
}
/* Responsive adjustments */
@media (max-width: 600px) {
.g-review-slider {
padding: 10px;
}
.g-review-slider button {
padding: 8px;
font-size: 14px;
}
}
Javascript
let slideIndex = 0;
let autoSlideInterval;
// Function to
move slides
function gmoveSlide(n) {
const slides = document.querySelector('.g-slides');
const totalSlides = document.querySelectorAll('.g-slide').length;
slideIndex += n;
if (slideIndex >= totalSlides) {
slideIndex = 0;
} else if (slideIndex
< 0) {
slideIndex = totalSlides - 1;
}
slides.style.transform = `translateX(${-slideIndex * 100}%)`;
}
// Function to
start auto-sliding
function startAutoSlide() {
autoSlideInterval = setInterval(()
=> {
gmoveSlide(1);
}, 5000); // Change slide every 5 seconds
}
// Function to
stop auto-sliding (optional, for user interaction)
function stopAutoSlide() {
clearInterval(autoSlideInterval);
}
// Start
auto-slide when the page loads
window.onload = () => {
startAutoSlide();
};
// Optional:
Stop auto-slide when user interacts with the slider
document.querySelector('.g-review-slider').addEventListener('mouseenter', stopAutoSlide);
document.querySelector('.g-review-slider').addEventListener('mouseleave',
startAutoSlide);
No comments:
Post a Comment