## Round 1 - Coding ## Problem Build a slideshow component in vanilla JavaScript (no frameworks). The slideshow displays one image at a time, auto-advances every 3 seconds, and supports manual prev/next navigation. Clicking a dot indicator jumps to that slide. Pauses auto-advance on hover. ```html ← → ``` ```javascript class Slideshow { constructor(container, images) { // images: [{src: string, alt: string}, ...] } goTo(index) { /* wrap around */ } next() {} prev() {} startAutoPlay(intervalMs = 3000) {} stopAutoPlay() {} } ``` ``` Behavior: - Wraps: last slide -> next -> first slide - Active dot highlighted via CSS class - mouseenter pauses, mouseleave resumes - Keyboard: ArrowLeft/ArrowRight navigate ``` ## Follow-ups 1. How would you add a CSS fade transition between slides without causing layout shifts? 2. If images are loaded lazily, how do you preload the next slide in advance? 3. How would you make this component accessible (ARIA roles, keyboard focus management)? 4. Refactor into a React functional component with hooks — what state do you need?

InterviewDB Experience

Slideshow Frontend: Build an Auto-Advancing Image Carousel Component

Frontend Onsite

Interview Experience

Round 1 - Coding Problem Build a slideshow component in vanilla JavaScript (no frameworks). The slideshow displays one image at a time, auto-advances every 3 seconds, and supports manual prev/next navigation. Clicking a dot indicator jumps to that slide. Pauses auto-advance on hover. Follow-ups How would you add a CSS fade transition between slides without causing layout shifts? If images are loaded lazily, how do you preload the next slide in advance? How would you make this component accessibl…

Full Details

🔒

Unlock all Squarespace questions

Full insider details, leaked discussions, and candidate experiences.

Get full access — $100 a year, unlimited access

About This Question

This is a candidate experience report from a squarespace interview for a frontend role during the onsite round.

It covers the following topics: Coding, Strings, Frontend, Onsite .

Topics

Coding Strings Frontend Onsite

Slideshow Frontend: Build an Auto-Advancing Image Carousel Component

Interview Experience

Full Details

About This Question

Topics

More Squarespace Interview Questions