About Svelte Ken Burns
This is a CSS-only slideshow for Svelte and SvelteCMS, with configurable per-image pan and zoom
settings to create the motion effects popularly associated with American film maker Ken Burns.
- works with Javascript disabled
- respects
prefers-reduced-motion
settings - click to play / pause
- works for any number of images
- supports server-side rendering
Usage as Svelte Component
<script>
import Slideshow from 'svelte-ken-burns'
</script>
<Slideshow {slides} {options} />
The types for slides and options should be avalable when coding, but here they are:
export type PanZoom = {
x?: number,
y?: number,
zoom?: number,
tx?: number,
ty?: number,
}
export type Slide = KenBurnsImageParams & {
image: string|{
src: string
alt?: string
[key:string]: Value
}
start?: PanZoom,
end?: PanZoom,
}
export type SlideshowOptions = {
slideDuration:number
fadeDuration:number
fadeOutDuration:number
iterations:number|"infinite"
endOpacity:number
}
Usage with SvelteCMS
import CMS from 'sveltecms'
import conf from './sveltecms.config.json'
import {kenBurnsPlugin} from 'svelte-ken-burns'
import defaultContent from 'sveltecms/plugins/defaultContent'
const cms = new CMS(conf, [
defaultContent,
kenBurnsPlugin,
])
The SvelteCMS plugin provides the following entities and configurations:
- FieldTypes
- WidgetTypes
- Fields
- slides (type: fieldgroup)
- Fieldgroups
- Components
- skb:slideshow
- skb:slideshow-fieldset
To use the plugin, add a Field of type "slides" to any content type,
or add a "skb_slideshow" fieldgroup block to any "blocks" field.