Is there a recommended way to define custom animations? I tried creating one myself and including this in the page's stylesheet:

@keyframes ken-burns-test {
    to {
        transform: scale3d(1.05, 1.05, 1.05) translate3d(1%, -2%, 0);
    }
}

Then I set animation-names="ken-burns-test". Oddly enough the animation doesn't get used, possibly because the Ken Burns carousel is using a shadow DOM that - I assume - doesn't inherit any of its parent DOM's CSS rules.

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Highjacking Github Issues for their image hosting capabilities 🙌.

Part of the WCAG2.1 spec states that 'For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential'

https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-time-limits-pause

It would be great if you could add this option, or the ability to interact with the component so someone could create their own pause, stop buttons.

I'm getting the following error in my browser:

ReferenceError: customElements is not defined ken-burns-carousel.ts:3
<anonymous>
ken-burns-carousel.ts:3
<anonymous>
https://festify.github.io/ken-burns-carousel/ken-burns-carousel.min.js:1:155
<anonymous>
https://festify.github.io/ken-burns-carousel/ken-burns-carousel.min.js:1:2

Here's the offending file:

import Carousel from './element.js';

customElements.define('ken-burns-carousel', Carousel);

export default Carousel;

This happens when I include the package using import from 'ken-burns-carousel' syntax, when I load the minified version from the example site and when I load it from UNPKG. Is this a bug or misconfiguration?

Couldn't find any way to make the initial image opacity 1. Would be really nice if there was an option to have the initial image show and then fade all images after that.

Great job and thanks for sharing!

EDIT
For anyone else looking to do this:
Note: initialLoop is used to make sure we only set fade duration on idx 0 once (initially).
in constructor:

this.initialLoop = true;
this.fadeInitial = false;

in observedAttributes:

"fade-initial" /* FadeInitial */,

in attributeChangedCallback:

case "fade-initial" /* FadeInitial */:
    this.fadeInitial = newVal === "true" ? true : false;
    break;

change:

wrap.style.animationDuration = `${this.slideDuration}ms, ${this.fadeDuration}ms`;

to

wrap.style.animationDuration = !this.fadeInitial && index === 0 && this.initialLoop ?`${this.slideDuration}ms, 0ms`: `${this.slideDuration}ms, ${this.fadeDuration}ms`; 

and below this._timeout = setTimeout(() => insert(nextIndex, next), this.slideDuration - this.fadeDuration); add:

if(this.initialLoop === true){
    this.initialLoop = false;
}

Then in component (which is now false by default), to fade first image (initially):

fade-initial={true}

Having the images specced in an attribute is a bit too React-ish. Consider using slots instead. This would also give to possibility to use and for assigning srcset for responsive images or using WebP with fallback etc :)

<ken-burns-carousel>
   <slot>
      <img src="https://source.unsplash.com/Qh9Swf_8DyA" alt="">
      <img src="https://source.unsplash.com/O453M2Liufs" alt="">
   </slot>
</ken-burns-carousel>

For img elements getting the imageURL could be done like so: https://codepen.io/enjikaka/pen/mYKWGP?editors=0010