❤
npm
Sign UpSign In

img-slideshow

1.1.0 • Public • Published

img-slideshow

A custom element for displaying a transitioning slideshow of images.

<!DOCTYPE html>
<html>
<head>
    <title>img-slideshow</title>
    <script type="module" src="./dist/index.js"></script> 
</head>
 
<body>
    <img-slideshow base-url="https://picsum.photos" src='["/id/100/200/300", "/id/101/200/300", "/id/102/200/300"]' interval="3000" />
</body>
 
</html>

Attributes

src

String JSON array of URLs to use as image sources.

src='["https://picsum.photos/id/100/200/300", "https://picsum.photos/id/101/200/300", "https://picsum.photos/id/102/200/300"]'

base-url

Optionally specify a common root for each URL in src.

<img-slideshow base-url="https://picsum.photos" src='["/id/100/200/300", "/id/101/200/300", "/id/102/200/300"]' />

is equivalent to

<img-slideshow src='["https://picsum.photos/id/100/200/300", "https://picsum.photos/id/101/200/300", "https://picsum.photos/id/102/200/300"]' \>

interval

Set the time between slide transitions (ms). Defaults to 2000.

Events

"slidetransition"

Emitted on transitioning to the next slide.

Handler callback has signature

(e: {prevSlideIndex: number, newSlideIndex: number, totalSlides: number}) => void

Methods

nextSlide(): void

Advances the slideshow to the next slide, emmiting event "slidetransition" on transition.

prevSlide(): void

Moves the slideshow back to show the previous slide.

goto(slideIndex: number): void

Advances the slideshow to show the ith slide, using the indices of the src array starting from 0. Negative indices will count back from the last slide.

stop(): void

Stops the slideshow.

start(): void

(Re)starts the slideshow.

Readme

Keywords

Package Sidebar

Install

npm i img-slideshow

Repository

github.com/b-goodman/img-slideshow

Homepage

github.com/b-goodman/img-slideshow#readme

Weekly Downloads

0

Version

1.1.0

License

MIT

Unpacked Size

15.6 kB

Total Files

10

Last publish

Collaborators

  • bgoodman
Try on RunKit
Report malware