prev button position fix

Author: AJIXuMuK

src/controls/carousel/Carousel.module.scss

@@ -34,6 +34,8 @@
   // ButtonContainer display mode
   .buttonsOnlyPrevButton {
     position: absolute;
+    left: 0;
+    z-index: 1;
   }
   .buttonsOnlyPrevButton:hover {
     cursor: pointer;
@@ -43,6 +45,7 @@
   .buttonsOnlyNextButton {
     position: absolute;
     left: -32px;
+    z-index: 1;
   }
   .buttonsOnlyNextButton:hover {
     cursor: pointer;

src/webparts/controlsTest/components/ControlsTest.module.scss

@@ -76,4 +76,8 @@
     background-color: orange !important;
     opacity: 0.3;
   }
+
+  .carouselImageContent {
+    height: 400px;
+  }
 }

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -1038,11 +1038,11 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
         <div>
           <h3>Carousel with CarouselImage elements:</h3>
           <Carousel
-            buttonsLocation={CarouselButtonsLocation.top}
-            buttonsDisplay={CarouselButtonsDisplay.block}
+            buttonsLocation={CarouselButtonsLocation.center}
+            buttonsDisplay={CarouselButtonsDisplay.buttonsOnly}
 
-            contentContainerStyles={styles.carouselContent}
-            containerButtonsStyles={styles.carouselButtonsContainer}
+            contentContainerStyles={styles.carouselImageContent}
+            //containerButtonsStyles={styles.carouselButtonsContainer}
 
             isInfinite={true}