54 lines
1.0 KiB
JavaScript
54 lines
1.0 KiB
JavaScript
import { LitElement, css, html } from 'lit'
|
|
|
|
import '../components/Image.js'
|
|
|
|
class ImageCarousel extends LitElement {
|
|
static properties = {
|
|
images: { type: Array }
|
|
}
|
|
|
|
constructor() {
|
|
super()
|
|
this.images = []
|
|
}
|
|
|
|
firstUpdated() {
|
|
console.log(this.images)
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
${this.images.map(i => html`<mm-image .details=${i}></mm-image>`)}
|
|
`
|
|
}
|
|
|
|
static styles = css`
|
|
:host {
|
|
height: 100%;
|
|
width: 100%;
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: 100%;
|
|
grid-template-rows: 100%;
|
|
overflow: auto;
|
|
justify-items: center;
|
|
|
|
scroll-behaviour: smooth;
|
|
scroll-padding-inline: 0.5em;
|
|
padding-inline-start: 0.5em;
|
|
padding-inline-end: 0.5em;
|
|
padding-block-start: 0.25em;
|
|
padding-block-end: 0.75em;
|
|
background: black;
|
|
}
|
|
|
|
mm-image {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
`
|
|
}
|
|
|
|
customElements.define('mm-img-carousel', ImageCarousel)
|