liveBook · Manning

Photo carousel

As explained in Web Components in Action

A user-interface component that presents a sequence of photos and provides controls for moving between them.

A photo carousel is a standalone Web Component that displays an album title, author, and one photo at a time, with controls for moving backward and forward. section 2.6

Embedding the carousel

Place <wcia-photo-carousel> on a page and provide an album title, author, and image paths through attributes. Serve the page over HTTP when loading external assets, CSS, or JavaScript.

How Web Components in Action covers it

How deep it goes
Explains markup, styling, state, image display, and click handling, but keeps the component deliberately simple.
Examples
Uses future vacation photos, an image-path attribute, forward and back buttons, and a finished visual demo.
What it assumes
Assumes prior web development knowledge while introducing the component incrementally from basic HTML and browser setup.
What you can do after
Build it from scratch as a simple Web Component with configurable metadata, images, styling, and circular navigation.
How it connects
Connects Web Components with custom elements, HTML attributes, CSS, JavaScript classes, and DOM event listeners.
Cover of Web Components in Action
liveBookmanning.com
Read Web Components in Action on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Web Components in Action. The section links point to the parts of the book it draws on.