Premium

Image Slider (Basic Navigation)

By FrontendAtlas Team · Updated Jan 30, 2026

Create a basic image slider with next/prev controls and an active index. Guard the index at bounds, update the displayed image and label, and keep disabled states in sync with index. Concepts: vue, components, reactivity. Framework focus: Vue SFC patterns, ref/reactive state, computed/watch, and v-model…

Render the image slider UI as the main component.
Display exactly one slide at a time with an image and a…

What you’ll build / What this tests

This premium vue coding focuses on Image Slider (Basic Navigation). You’ll apply vue and components thinking with easy level constraints. The prompt emphasizes Create a basic image slider with next/prev controls and an active index. Guard the index at….

Learning goals

Translate the prompt into a clear vue API signature and return shape.
Apply vue, components, reactivity techniques to implement image slider (basic navigation).
Handle easy edge cases without sacrificing readability.
Reason about time/space complexity and trade-offs in vue.

Key decisions to discuss

Define the exact input/output contract before coding.
Choose iteration vs higher-order methods for readability.
Prioritize predictable edge-case handling over micro-optimizations.

Evaluation rubric

Correctness: covers required behaviors and edge cases.
Clarity: readable structure and predictable control flow.
Complexity: avoids unnecessary work for large inputs.
API discipline: no mutation of inputs; returns expected shape.
Testability: solution is easy to unit test.

Constraints / Requirements

Render the image slider UI as the main component.
Display exactly one slide at a time with an image and a caption.
Show the current position as 'Slide X of Y'.
Provide 'Previous' and 'Next' buttons to move between slides.
Disable 'Previous' on the first slide and 'Next' on the last slide.
Render dot indicators for each slide and allow clicking a dot to jump directly to that slide.
Initial slide is the first one in the list.
Clicking 'Next' moves forward by one slide until the last slide.
Clicking 'Previous' moves backward by one slide until the first slide.
The 'Previous' button is disabled on the first slide.

Mini snippet (usage only)

// Example usage
const input = /* image slider (basic navigation) input */;
const result = solve(input);
console.log(result);

// Edge case check
const empty = input ?? null;
const fallback = solve(input);
console.log(fallback);

// Expected: describe output shape, not the implementation
// (no solution code in preview)

Common pitfalls

Mutating inputs instead of returning a new value.
Skipping edge cases like empty input, duplicates, or nulls.
Overlooking time complexity for large inputs.