Attempt at a simple image carousel for Aurelia

carousel.html

<div repeat.for="image of images">
    <img src.bind="image.src" alt.bind="image.alt" show.bind="$index === activeimage" />
</div>

carousel.js

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;
        }
    }
}

test.html

<template>
    <require from="./carousel"></require>
    <carousel images.bind="images" interval="5000" ></carousel>
</template>

test.js

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' }
        ];
    }
}

That works, thanks!