dshunt's picture
Create a creative agency portfolio with animated hero section, featured projects showcase with case studies, services we provide, team members grid, client testimonials slider, awards section, and get a quote form.
4f91b68 verified
document.addEventListener('DOMContentLoaded', function() {
// Testimonial Slider
const slider = document.querySelector('.testimonial-slider .flex');
const slides = document.querySelectorAll('.testimonial-slide');
const dots = document.querySelectorAll('.testimonial-dot');
const prevBtn = document.querySelector('.testimonial-prev');
const nextBtn = document.querySelector('.testimonial-next');
let currentIndex = 0;
function updateSlider() {
slider.style.transform = `translateX(-${currentIndex * 100}%)`;
// Update dots
dots.forEach((dot, index) => {
if(index === currentIndex) {
dot.classList.add('active');
dot.classList.remove('bg-white/50');
} else {
dot.classList.remove('active');
dot.classList.add('bg-white/50');
}
});
}
// Next slide
function nextSlide() {
currentIndex = (currentIndex + 1) % slides.length;
updateSlider();
}
// Previous slide
function prevSlide() {
currentIndex = (currentIndex - 1 + slides.length) % slides.length;
updateSlider();
}
// Dot navigation
dots.forEach((dot, index) => {
dot.addEventListener('click', () => {
currentIndex = index;
updateSlider();
});
});
// Button events
nextBtn.addEventListener('click', nextSlide);
prevBtn.addEventListener('click', prevSlide);
// Auto slide
let slideInterval = setInterval(nextSlide, 5000);
// Pause on hover
slider.addEventListener('mouseenter', () => {
clearInterval(slideInterval);
});
slider.addEventListener('mouseleave', () => {
slideInterval = setInterval(nextSlide, 5000);
});
// Initialize first dot
dots[0].classList.add('active');
dots[0].classList.remove('bg-white/50');
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if(targetId === '#') return;
const targetElement = document.querySelector(targetId);
if(targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
}
});
});
// Mobile menu toggle (handled in navbar component)
});