diff --git a/samples/react-carousel/src/webparts/carousel/components/Carousel.module.scss b/samples/react-carousel/src/webparts/carousel/components/Carousel.module.scss
index ad71b406f..ccb31fbce 100644
--- a/samples/react-carousel/src/webparts/carousel/components/Carousel.module.scss
+++ b/samples/react-carousel/src/webparts/carousel/components/Carousel.module.scss
@@ -1,74 +1,74 @@
 @import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
-
 .carousel {
-  .container {
-    max-width: 700px;
-    margin: 0px auto;
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
-  }
-
-  .row {
-    @include ms-Grid-row;
-    @include ms-fontColor-white;
-    background-color: $ms-color-themeDark;
-    padding: 20px;
-  }
-
-  .column {
-    @include ms-Grid-col;
-    @include ms-lg10;
-    @include ms-xl8;
-    @include ms-xlPush2;
-    @include ms-lgPush1;
-  }
-
-  .title {
-    @include ms-font-xl;
-    @include ms-fontColor-white;
-  }
-
-  .subTitle {
-    @include ms-font-l;
-    @include ms-fontColor-white;
-  }
-
-  .description {
-    @include ms-font-l;
-    @include ms-fontColor-white;
-  }
-
-  .button {
-    // Our button
-    text-decoration: none;
-    height: 32px;
-
-    // Primary Button
-    min-width:  80px;
-    background-color: $ms-color-themePrimary;
-    border-color: $ms-color-themePrimary;
-    color: $ms-color-white;
-
-    // Basic Button
-    outline: transparent;
-    position: relative;
-    font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
-    -webkit-font-smoothing: antialiased;
-    font-size: $ms-font-size-m;
-    font-weight: $ms-font-weight-regular;
-    border-width: 0;
-    text-align: center;
-    cursor: pointer;
-    display: inline-block;
-    padding: 0 16px;
-
-    .label {
-      font-weight: $ms-font-weight-semibold;
-      font-size: $ms-font-size-m;
-      height: 32px;
-      line-height: 32px;
-      margin: 0 4px;
-      vertical-align: top;
-      display: inline-block;
+    .container {
+        max-width: 700px;
+        margin: 0px auto;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
+    }
+    .row {
+        @include ms-Grid-row;
+        @include ms-fontColor-white;
+        background-color: $ms-color-themeDark;
+        padding: 20px;
+    }
+    .column {
+        @include ms-Grid-col;
+        @include ms-lg10;
+        @include ms-xl8;
+        @include ms-xlPush2;
+        @include ms-lgPush1;
+    }
+    .title {
+        @include ms-font-xl;
+        @include ms-fontColor-white;
+    }
+    .subTitle {
+        @include ms-font-l;
+        @include ms-fontColor-white;
+    }
+    .description {
+        @include ms-font-l;
+        @include ms-fontColor-white;
+    }
+    .button {
+        // Our button
+        text-decoration: none;
+        height: 32px;
+        // Primary Button
+        min-width: 80px;
+        background-color: $ms-color-themePrimary;
+        border-color: $ms-color-themePrimary;
+        color: $ms-color-white;
+        // Basic Button
+        outline: transparent;
+        position: relative;
+        font-family: "Segoe UI WestEuropean", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
+        -webkit-font-smoothing: antialiased;
+        font-size: $ms-font-size-m;
+        font-weight: $ms-font-weight-regular;
+        border-width: 0;
+        text-align: center;
+        cursor: pointer;
+        display: inline-block;
+        padding: 0 16px;
+        .label {
+            font-weight: $ms-font-weight-semibold;
+            font-size: $ms-font-size-m;
+            height: 32px;
+            line-height: 32px;
+            margin: 0 4px;
+            vertical-align: top;
+            display: inline-block;
+        }
     }
-  }
 }
+
+:global {
+    .slick-next,
+    .slick-prev {
+        background: $ms-color-themePrimary !important;
+    }
+    .slick-dots {
+        position: initial !important;
+    }
+}
\ No newline at end of file
diff --git a/samples/react-carousel/src/webparts/carousel/components/Carousel.tsx b/samples/react-carousel/src/webparts/carousel/components/Carousel.tsx
index 6f0cd411a..2be692dfa 100644
--- a/samples/react-carousel/src/webparts/carousel/components/Carousel.tsx
+++ b/samples/react-carousel/src/webparts/carousel/components/Carousel.tsx
@@ -173,7 +173,7 @@ export default class Carousel extends React.Component<ICarouselProps, ICarouselS
   }
   public render(): React.ReactElement<ICarouselProps> {
     const sliderSettings = {
-      dots: false,
+      dots: true,
       infinite: true,
       speed: 500,
       slidesToShow: 1,
@@ -181,7 +181,7 @@ export default class Carousel extends React.Component<ICarouselProps, ICarouselS
       lazyLoad: 'progressive',
       autoplaySpeed: 3000,
       initialSlide: this.state.photoIndex,
-      arrows: false,
+      arrows: true,
       draggable: true,
       adaptiveHeight: true,
       useCSS: true,
@@ -216,7 +216,7 @@ export default class Carousel extends React.Component<ICarouselProps, ICarouselS
                     <Label style={{ width: '250px', margin: 'auto', fontSize: FontSizes.size20 }}>No images in the library</Label>
                   </div>
                   :
-                  <div style={{ width: '100%', height: '100%', overflow: 'hidden' }}>
+                  <div style={{ width: '100%', height: '100%'}}>
 
                     <div style={{ width: '100%'}}>
                       <Slider