Skip to content

feat: infinite slider with modular architecture + JSDoc - #1247

Open
MELS1922 wants to merge 1 commit into
thinkswell:masterfrom
MELS1922:InfiniteImageSlider-MELS1922
Open

feat: infinite slider with modular architecture + JSDoc#1247
MELS1922 wants to merge 1 commit into
thinkswell:masterfrom
MELS1922:InfiniteImageSlider-MELS1922

Conversation

@MELS1922

Copy link
Copy Markdown

Closes #954

I implemented an infinite image slider with a modular architecture. The project follows a "black box" design: each module has a single responsibility and doesn't depend on implementation details of others.

Modules

  • DataSource: manages slide data and circular navigation logic. Pure state, no DOM knowledge.
  • SlideRenderer: transforms slide data into DOM elements. Pure rendering, no state or events.
  • SliderController: handles user interactions and coordinates updates between data and view.

Why colored blocks instead of images?

To ensure the project works reliably on local file:// protocol without triggering browser security warnings (CORS/unsafe load). The core logic (circular indexing, rendering, event handling) is fully implemented and testable. Real images can be added later by simply swapping the data array.

How to run

  1. Open InfiniteImageSlider/index.html in any browser.
  2. Use "Prev" and "Next" buttons to navigate.
  3. Verify wrap-around: after the last slide, it goes back to the first.

Checklist

  • Followed all guidelines in README.
  • Maintained required directory structure (InfiniteImageSlider).
  • This PR contains only one project.
  • Screenshots attached.
InfiniteImageSlider

by MELS1922

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[feat]: Add an infinite image slider.

1 participant