Replace hero mockup with auto-rotating screenshot carousel
- Swap static dashboard card for 3-slide image carousel in hero section - Slides auto-advance every 4.5s, pause on hover, support manual prev/next and dot navigation - Add carousel CSS with fade transition, dot indicators, and glow border treatment - Add carousel JS with goTo/prev/next/auto-rotate logic - Images expected at img/screenshot-dashboard.png, img/screenshot-cashflow.png, img/screenshot-capital.png Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
46
app.js
46
app.js
@@ -20,6 +20,52 @@
|
||||
if (signupEl) signupEl.textContent = text;
|
||||
})();
|
||||
|
||||
// ── Screenshot Carousel ──────────────────────────────────
|
||||
(function initCarousel() {
|
||||
const carousel = document.getElementById('screenshotCarousel');
|
||||
if (!carousel) return;
|
||||
|
||||
const slides = carousel.querySelectorAll('.carousel-slide');
|
||||
const dots = carousel.querySelectorAll('.carousel-dot');
|
||||
let current = 0;
|
||||
let timer;
|
||||
|
||||
function goTo(index) {
|
||||
slides[current].classList.remove('active');
|
||||
dots[current].classList.remove('active');
|
||||
current = (index + slides.length) % slides.length;
|
||||
slides[current].classList.add('active');
|
||||
dots[current].classList.add('active');
|
||||
}
|
||||
|
||||
function next() { goTo(current + 1); }
|
||||
function prev() { goTo(current - 1); }
|
||||
|
||||
function startAuto() {
|
||||
timer = setInterval(next, 4500);
|
||||
}
|
||||
function resetAuto() {
|
||||
clearInterval(timer);
|
||||
startAuto();
|
||||
}
|
||||
|
||||
carousel.querySelector('.carousel-next').addEventListener('click', () => { next(); resetAuto(); });
|
||||
carousel.querySelector('.carousel-prev').addEventListener('click', () => { prev(); resetAuto(); });
|
||||
|
||||
dots.forEach(dot => {
|
||||
dot.addEventListener('click', () => {
|
||||
goTo(parseInt(dot.dataset.index, 10));
|
||||
resetAuto();
|
||||
});
|
||||
});
|
||||
|
||||
// Pause on hover
|
||||
carousel.addEventListener('mouseenter', () => clearInterval(timer));
|
||||
carousel.addEventListener('mouseleave', startAuto);
|
||||
|
||||
startAuto();
|
||||
})();
|
||||
|
||||
// ── Form Handler ─────────────────────────────────────────
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const form = document.getElementById('signupForm');
|
||||
|
||||
Reference in New Issue
Block a user