Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

No fade on initial image #7

Open
axelra82 opened this issue Mar 22, 2020 · 1 comment
Open

No fade on initial image #7

axelra82 opened this issue Mar 22, 2020 · 1 comment

Comments

@axelra82
Copy link

axelra82 commented Mar 22, 2020

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}
@leolabs
Copy link
Member

leolabs commented Mar 23, 2020

Hey, that's a good idea! Would you mind making a PR for that? We'd be happy to add that option to the library :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants