Ken Burns Carousel

A bare and extremely light web component that displays a set of images with a ken burns effect.

View on GitHub | View on NPM

Default Configuration With Five Images

This carousel can be easily used by placing a ken-burns-carousel anywhere in your body. By default, slides are set to 20s with a fade of 2.5s. 

<ken-burns-carousel
    images="https://source.unsplash.com/Qh9Swf_8DyA
        https://source.unsplash.com/O453M2Liufs
        https://source.unsplash.com/1OtUkD_8svc
        https://source.unsplash.com/gIgciC_WKnY
        https://source.unsplash.com/LCguCXU3Ffk">
</ken-burns-carousel>

Slide and Fade Duration

The slide and fade durations can be easily modified using HTML attributes.

<ken-burns-carousel
    fade-duration="1000"
    slide-duration="5000"
    images="https://source.unsplash.com/Qh9Swf_8DyA
        https://source.unsplash.com/O453M2Liufs
        https://source.unsplash.com/1OtUkD_8svc
        https://source.unsplash.com/gIgciC_WKnY
        https://source.unsplash.com/LCguCXU3Ffk">
</ken-burns-carousel>

Animation Direction

By setting the animation direction to either normal, reverse or random, you can decide if images should always zoom in, out or randomly decide. 

<ken-burns-carousel
    fade-duration="4000"
    slide-duration="10000"
    animation-direction="normal"
    images="https://source.unsplash.com/Qh9Swf_8DyA
        https://source.unsplash.com/O453M2Liufs
        https://source.unsplash.com/1OtUkD_8svc
        https://source.unsplash.com/gIgciC_WKnY
        https://source.unsplash.com/LCguCXU3Ffk">
</ken-burns-carousel>

Animation Names

You can choose between different ken burns styles by setting the animation-names attribute. You can find a list of all available styles in the code. 

<ken-burns-carousel
    animation-names="ken-burns-center"
    images="https://source.unsplash.com/Qh9Swf_8DyA
        https://source.unsplash.com/O453M2Liufs
        https://source.unsplash.com/1OtUkD_8svc
        https://source.unsplash.com/gIgciC_WKnY
        https://source.unsplash.com/LCguCXU3Ffk">
</ken-burns-carousel>

Filters

By setting the --img-filter variable in CSS, you can apply a custom filter to every image. 

<style>
    ken-burns-carousel {
        --img-filter: grayscale(100%);
    }
</style>

<ken-burns-carousel
    images="https://source.unsplash.com/Qh9Swf_8DyA
        https://source.unsplash.com/O453M2Liufs
        https://source.unsplash.com/1OtUkD_8svc
        https://source.unsplash.com/gIgciC_WKnY
        https://source.unsplash.com/LCguCXU3Ffk">
</ken-burns-carousel>