Last active
May 2, 2024 05:23
-
-
Save egeland/2c40d2657f1237d66f63 to your computer and use it in GitHub Desktop.
Attempt at a simple image carousel for Aurelia
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div repeat.for="image of images"> | |
<img src.bind="image.src" alt.bind="image.alt" show.bind="$index === activeimage" /> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import {bindable} from 'aurelia-framework'; | |
export class CarouselCustomElement { | |
@bindable images = []; | |
@bindable interval = 5000; // ms | |
activeimage = 0; | |
attached() { | |
if (this.images.length > 0) { | |
this.startTimer(); | |
} | |
} | |
detached() { | |
if (this.timer) { | |
clearInterval(this.timer); | |
} | |
} | |
startTimer() { | |
this.timer = setInterval(() => { | |
this.changeImage(); | |
}, this.interval); | |
} | |
// This gets triggered and updates the activeimage variable | |
changeImage() { | |
if (!this.images.length > 0) { return; } | |
if (this.activeimage >= this.images.length - 1) { | |
this.activeimage = 0; | |
} else { | |
this.activeimage += 1; | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<require from="./carousel"></require> | |
<carousel images.bind="images" interval="5000" ></carousel> | |
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export class test { | |
constructor() { | |
this.images = [ | |
{ src: 'http://thecatapi.com/api/images/get?format=src&type=jpg', alt: 'Cat Pic 2' }, | |
{ src: 'http://thecatapi.com/api/images/get?format=src&type=gif', alt: 'Cat Pic 1' }, | |
{ src: 'http://thecatapi.com/api/images/get?format=src&type=png', alt: 'Cat Pic 3' } | |
]; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Last version could have been:
Not sure if that helps with the transitions though.