Package Exports
- @webwriter/slides/custom-elements.json
- @webwriter/slides/editing-config.json
- @webwriter/slides/icon
- @webwriter/slides/snippets/example.html
- @webwriter/slides/tests/functionality.css
- @webwriter/slides/tests/functionality.js
- @webwriter/slides/widgets/webwriter-slide.css
- @webwriter/slides/widgets/webwriter-slide.js
- @webwriter/slides/widgets/webwriter-slides.css
- @webwriter/slides/widgets/webwriter-slides.js
Readme
Slides (@webwriter/slides@2.3.0)
License: MIT | Version: 2.3.0
Present content as a sequence of slides or tabs.
Snippets
Snippets are examples and templates using the package's widgets.
| Name | Import Path |
|---|---|
| Example | @webwriter/slides/snippets/example.html |
WebwriterSlides (<webwriter-slides>)
Container for displaying a slideshow of content sequentially.
Usage
Use with a CDN (e.g. jsdelivr):
<link href="https://cdn.jsdelivr.net/npm/@webwriter/slides/widgets/webwriter-slides.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/@webwriter/slides/widgets/webwriter-slides.js"></script>
<webwriter-slides></webwriter-slides>Or use with a bundler (e.g. Vite):
npm install @webwriter/slides<link href="@webwriter/slides/widgets/webwriter-slides.css" rel="stylesheet">
<script type="module" src="@webwriter/slides/widgets/webwriter-slides.js"></script>
<webwriter-slides></webwriter-slides>Fields
| Name (Attribute Name) | Type | Description | Default | Reflects |
|---|---|---|---|---|
activeSlideIndex |
number |
Index of the currently active slide. | 0 |
✗ |
activeSlide |
WebwriterSlide |
The active slide element based on the activeSlideIndex. | - | ✗ |
type (type) |
'tabs' | 'slides' |
Defines the type of view for the slideshow. - "slides": Show content as sequential slides. - "tabs": Show content using tabs. |
'slides' |
✓ |
hasNextSlide |
boolean |
False if slideshow is on the last slide. | - | ✗ |
hasPreviousSlide |
boolean |
False if slideshow is on the first slide. | - | ✗ |
Fields including properties and attributes define the current state of the widget and offer customization options.
Methods
| Name | Description | Parameters |
|---|---|---|
_handleKeyDown |
Handles keyboard navigation for the slideshow. ArrowRight advances to the next slide, ArrowLeft goes back. Only possible in preview mode. |
e: KeyboardEvent |
addSlide |
Add a new empty slide element. Optionally insert after given index. | index: number |
duplicateSlide |
Duplicate an existing slide at given index. | index: number |
removeActiveSlide |
Remove the currently active slide element. | - |
removeSlide |
Remove the currently active slide element. | slideIndex: number |
nextSlide |
Activate the next slide element. | backwards=false, step=1 |
Methods allow programmatic access to the widget.
Slots
| Name | Description | Content Type |
|---|---|---|
default |
Slide elements to be displayed (should be webwriter-slide components only). |
webwriter-slide+ |
Slots define how the content of the widget is rendered.
Editing config
| Name | Value |
|---|---|
definingAsContext |
true |
definingForContent |
true |
content |
webwriter-slide+ |
The editing config defines how explorable authoring tools such as WebWriter treat the widget.
No public events, custom CSS properties, or CSS parts.
WebwriterSlide (<webwriter-slide>)
Represents a single slide in the webwriter-slides widget.
Usage
Use with a CDN (e.g. jsdelivr):
<link href="https://cdn.jsdelivr.net/npm/@webwriter/slides/widgets/webwriter-slide.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/@webwriter/slides/widgets/webwriter-slide.js"></script>
<webwriter-slide></webwriter-slide>Or use with a bundler (e.g. Vite):
npm install @webwriter/slides<link href="@webwriter/slides/widgets/webwriter-slide.css" rel="stylesheet">
<script type="module" src="@webwriter/slides/widgets/webwriter-slide.js"></script>
<webwriter-slide></webwriter-slide>Fields
| Name (Attribute Name) | Type | Description | Default | Reflects |
|---|---|---|---|---|
active (active) |
boolean |
Indicates whether the slide is currently active/visible. | false |
✓ |
thumbnail (thumbnail) |
string |
Data URI string for the slide thumbnail (e.g., "data:image/png;base64,..."). Used to display a preview image for the slide. |
"" |
✓ |
Fields including properties and attributes define the current state of the widget and offer customization options.
Slots
| Name | Description | Content Type |
|---|---|---|
default |
The content displayed within the slide. | p | flow* |
Slots define how the content of the widget is rendered.
Editing config
| Name | Value |
|---|---|
definingAsContext |
true |
definingForContent |
true |
content |
p | flow* |
uninsertable |
true |
The editing config defines how explorable authoring tools such as WebWriter treat the widget.
No public methods, events, custom CSS properties, or CSS parts.
Generated with @webwriter/build@1.5.0