From 04e285a5b65d0b66c0792fafcd97d7f80e05b7f4 Mon Sep 17 00:00:00 2001
From: Melissa Zhang <mzhang19096@gmail.com>
Date: Tue, 26 May 2020 23:33:31 -0700
Subject: added dots bar for navigating through carousel

---
 src/client/views/collections/CollectionCarousel3DView.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

(limited to 'src/client/views/collections/CollectionCarousel3DView.tsx')

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
-- 
cgit v1.2.3-70-g09d2

