Hello world!
Welcome to WordPress. This is your first post. Edit or delete it, then start writing!
Blog
The Culture Depository
Curated collections inspired by music, literature, and visual design.
document.addEventListener('DOMContentLoaded', function() { // --- Configuration --- const slideInterval = 4000; // Time in ms (4 seconds)
// --- Element Selection --- const slider = document.getElementById('hero-slider'); const slides = slider.querySelectorAll('.slide'); const dotsContainer = document.getElementById('slider-dots');
let currentSlide = 0; let slideTimer;
// --- 1. Initialize --- function init() { if (slides.length > 0) { // Create dots slides.forEach((slide, index) => { const dot = document.createElement('span'); dot.classList.add('dot'); if (index === 0) dot.classList.add('active');
// Add click event to each dot dot.addEventListener('click', () => { goToSlide(index); }); dotsContainer.appendChild(dot); });
// Start the slider startSlider(); } }
// --- 2. Go to a Specific Slide --- function goToSlide(slideIndex) { // Deactivate current slide and dot slides[currentSlide].classList.remove('active'); dotsContainer.children[currentSlide].classList.remove('active');
// Set new slide index currentSlide = slideIndex;
// Activate new slide and dot slides[currentSlide].classList.add('active'); dotsContainer.children[currentSlide].classList.add('active');
// Reset the timer resetTimer(); }
// --- 3. Go to the Next Slide --- function nextSlide() { let nextSlideIndex = (currentSlide + 1) % slides.length; goToSlide(nextSlideIndex); }
// --- 4. Timer Controls --- function startSlider() { slideTimer = setInterval(nextSlide, slideInterval); }
function resetTimer() { clearInterval(slideTimer); startSlider(); }
// --- Start the slider --- init(); });