outline-image-slider
The Image Slider component
Properties
| Property | Type | Default |
|---|---|---|
imageListTemplate |
() => TemplateResult<ResultType>[] |
"(): TemplateResult[] => {\n let counter = 0;\n const templateArr: TemplateResult[] = [];\n\n while (counter < this.childElementCount) {\n templateArr.push(\n html <div\n class=\"splide__slide\"\n role=\"group\"\n aria-label=\"slide ${counter + 1} of ${this.childElementCount}\"\n >\n <slot name=\"image-${counter + 1}\"></slot>\n <div aria-hidden=\"true\" class=\"slide-count\">\n <span>${counter + 1} / ${this.childElementCount}</span>\n </div>\n </div>\n );\n\n counter++;\n }\n\n return templateArr;\n }" |
nextBtn |
HTMLElement |
|
observer |
MutationObserver |
|
prevBtn |
HTMLElement |
|
setSlots |
() => void |
"() => {\n let counter = 0;\n while (counter <= this.childElementCount) {\n if (this.children[counter]) {\n this.children[counter].setAttribute('slot', image-${counter + 1});\n }\n counter++;\n }\n this.requestUpdate();\n }" |
splide |
Splide |
|
splideEl |
HTMLElement |
Slots
| Name | Description |
|---|---|
image-<number> |
slots are generated in code, component accepts stack of desired elements to display |