Merge pull request #1556 from Harshagracy/master

samples/react-carousel/README.md

@@ -44,6 +44,14 @@ Site Url of library | Text| yes|
 Picture Library| Choice/Dropdown | yes|  this is filled with all Picture Libraries (BaseTemplate : 109)
 number images to load | number| yes | number between 1 and 200
 
+### react-slick Props
+
+For all available props, go [here](https://react-slick.neostack.com/docs/api/).
+
+### react-slick Methods
+
+For all available methods, go [here](https://react-slick.neostack.com/docs/api#methods)
+
 ## Solution
 
 The web part Use PnPjs library, Microsoft Graph API, Office-ui-fabric-react components, react-slick Component

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 {
+    .container {
-    max-width: 700px;
+        max-width: 700px;
-    margin: 0px auto;
+        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);
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
-  }
+    }
-
+    .row {
-  .row {
+        @include ms-Grid-row;
-    @include ms-Grid-row;
+        @include ms-fontColor-white;
-    @include ms-fontColor-white;
+        background-color: $ms-color-themeDark;
-    background-color: $ms-color-themeDark;
+        padding: 20px;
-    padding: 20px;
+    }
-  }
+    .column {
-
+        @include ms-Grid-col;
-  .column {
+        @include ms-lg10;
-    @include ms-Grid-col;
+        @include ms-xl8;
-    @include ms-lg10;
+        @include ms-xlPush2;
-    @include ms-xl8;
+        @include ms-lgPush1;
-    @include ms-xlPush2;
+    }
-    @include ms-lgPush1;
+    .title {
-  }
+        @include ms-font-xl;
-
+        @include ms-fontColor-white;
-  .title {
+    }
-    @include ms-font-xl;
+    .subTitle {
-    @include ms-fontColor-white;
+        @include ms-font-l;
-  }
+        @include ms-fontColor-white;
-
+    }
-  .subTitle {
+    .description {
-    @include ms-font-l;
+        @include ms-font-l;
-    @include ms-fontColor-white;
+        @include ms-fontColor-white;
-  }
+    }
-
+    .button {
-  .description {
+        // Our button
-    @include ms-font-l;
+        text-decoration: none;
-    @include ms-fontColor-white;
+        height: 32px;
-  }
+        // Primary Button
-
+        min-width: 80px;
-  .button {
+        background-color: $ms-color-themePrimary;
-    // Our button
+        border-color: $ms-color-themePrimary;
-    text-decoration: none;
+        color: $ms-color-white;
-    height: 32px;
+        // Basic Button
-
+        outline: transparent;
-    // Primary Button
+        position: relative;
-    min-width:  80px;
+        font-family: "Segoe UI WestEuropean", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
-    background-color: $ms-color-themePrimary;
+        -webkit-font-smoothing: antialiased;
-    border-color: $ms-color-themePrimary;
+        font-size: $ms-font-size-m;
-    color: $ms-color-white;
+        font-weight: $ms-font-weight-regular;
-
+        border-width: 0;
-    // Basic Button
+        text-align: center;
-    outline: transparent;
+        cursor: pointer;
-    position: relative;
+        display: inline-block;
-    font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
+        padding: 0 16px;
-    -webkit-font-smoothing: antialiased;
+        .label {
-    font-size: $ms-font-size-m;
+            font-weight: $ms-font-weight-semibold;
-    font-weight: $ms-font-weight-regular;
+            font-size: $ms-font-size-m;
-    border-width: 0;
+            height: 32px;
-    text-align: center;
+            line-height: 32px;
-    cursor: pointer;
+            margin: 0 4px;
-    display: inline-block;
+            vertical-align: top;
-    padding: 0 16px;
+            display: inline-block;
-
+        }
-    .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;
+    }
+}

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