diff options
Diffstat (limited to 'src/client/views/collections/CollectionCarousel3DView.tsx')
| -rw-r--r-- | src/client/views/collections/CollectionCarousel3DView.tsx | 10 |
1 files changed, 10 insertions, 0 deletions
diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index 9665e23ff..aefac3512 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -141,6 +141,13 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume </>; } + @computed get dots() { + return (this.childLayoutPairs.map((_child, index) => { + return <div key={index} className={`dot${index === NumCast(this.layoutDoc._itemIndex) ? "-active" : ""}`} + onClick={() => this.layoutDoc._itemIndex = index} />; + })); + } + render() { const index = NumCast(this.layoutDoc._itemIndex); const offset = (index - 1) * (this.mainPanelWidth() - this.sidePanelWidth()) / this.childLayoutPairs.length; @@ -151,6 +158,9 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume {this.content} </div> {this.props.Document._chromeStatus !== "replaced" ? this.buttons : (null)} + <div className="dot-bar"> + {this.dots} + </div> </div>; } }
\ No newline at end of file |