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,19 +1,16 @@
 @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;
@@ -21,33 +18,27 @@
         @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;
@@ -60,7 +51,6 @@
         cursor: pointer;
         display: inline-block;
         padding: 0 16px;
-
         .label {
             font-weight: $ms-font-weight-semibold;
             font-size: $ms-font-size-m;
@@ -72,3 +62,13 @@
         }
     }
 }
+
+: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