looking under a huge log on the beach
a waterfall roars into a deep pool
a rocky beach with crashing waves
a mountain town shining in the sunlight

Options:

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, // the horizontal direction for the focal point, in percentage of width, as a number
  y?: number, // the vertical direction for the focal point, in percentage of height, as a number
  zoom?: number, // the scale applied to the image, as a number, e.g. 1.25 (numbers below 1 will result in borked display)
  tx?: number, // set automatically in the component
  ty?: number, // set automatically in the component
}

export type Slide = KenBurnsImageParams & {
  image: string|{
    src: string
    alt?: string
    [key:string]: Value // Value from SvelteCMS
  }
  start?: PanZoom,
  end?: PanZoom,
}

export type SlideshowOptions = {
  slideDuration:number // how long each slide is visible
  fadeDuration:number // how long the fade-in is when slides transition
  fadeOutDuration:number // set automatically by the component as fadeDuration * 2
  iterations:number|"infinite" // how many times the slideshow cycles
  endOpacity:number // the opacity for the last slide after the slideshow is done cycling
}

Usage with SvelteCMS

///file src/lib/cms.ts
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, // optional but recommended
  kenBurnsPlugin,
  // etc.
])

The SvelteCMS plugin provides the following entities and configurations:

  • FieldTypes
    • panZoom
  • WidgetTypes
    • panZoom
  • Fields
    • slides (type: fieldgroup)
  • Fieldgroups
    • skb_slideshow
  • 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.

If you're feeling adventurous, you can...

Try out SvelteCMS!

...and don't forget to install Svelte Ken Burns! npm i -D svelte-ken-burns