added dots bar for navigating through carousel

2 files changed, 33 insertions, 0 deletions

diff --git a/src/client/views/collections/CollectionCarousel3DView.scss b/src/client/views/collections/CollectionCarousel3DView.scss
index d1504dd12..47ee8ef53 100644
--- a/src/client/views/collections/CollectionCarousel3DView.scss
+++ b/src/client/views/collections/CollectionCarousel3DView.scss
@@ -18,4 +18,27 @@
         transition: height 0.5s linear;
         transition: width 0.5s linear;
     }
+}
+
+.dot-bar {
+    display: flex;
+    position: absolute;
+    justify-content: center;
+    bottom: 5%;
+    width: 100%;
+
+    .dot,
+    .dot-active {
+        height: 15px;
+        width: 15px;
+        border-radius: 50%;
+        margin: 3px;
+        display: inline-block;
+        background-color: lightgrey;
+        cursor: pointer;
+    }
+
+    .dot-active {
+        background-color: grey;
+    }
 }
\ No newline at end of file
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