pause on hover/touch

Author: AJIXuMuK

src/controls/carousel/Carousel.tsx

@@ -65,7 +65,8 @@ export class Carousel extends React.Component<ICarouselProps, ICarouselState> {
       loadingComponentContainerStyles,
       prevButtonIconName = 'ChevronLeft',
       nextButtonIconName = 'ChevronRight',
-      loadingComponent = <Spinner />
+      loadingComponent = <Spinner />,
+      pauseOnHover
     } = this.props;
 
     const processing = processingState === ProcessingState.processing;
@@ -86,7 +87,12 @@ export class Carousel extends React.Component<ICarouselProps, ICarouselState> {
             onClick={() => { this.onCarouselButtonClicked(false); }} />
         </div>
 
-        <div className={this.getMergedStyles(styles.contentContainer, contentContainerStyles)}>
+        <div
+        className={this.getMergedStyles(styles.contentContainer, contentContainerStyles)}
+        onMouseOver={pauseOnHover ? this.pauseCycle : undefined}
+        onTouchStart={pauseOnHover ? this.pauseCycle : undefined}
+        onMouseLeave={pauseOnHover ? this.startCycle : undefined}
+        onTouchEnd={pauseOnHover ? this.startCycle : undefined}>
           {
             processing &&
             <div className={this.getMergedStyles(styles.loadingComponent, loadingComponentContainerStyles)}>
@@ -463,4 +469,15 @@ export class Carousel extends React.Component<ICarouselProps, ICarouselState> {
       }
     }
   }
+
+  private pauseCycle = (): void => {
+    if (this._intervalId) {
+      if (this.props.triggerPageEvent) {
+        clearTimeout(this._intervalId);
+      }
+      else {
+        clearInterval(this._intervalId);
+      }
+    }
+  }
 }

src/controls/carousel/ICarouselProps.ts

@@ -153,6 +153,11 @@ export interface ICarouselProps {
    */
   interval?: number | null;
 
+  /**
+   * Specifies if slides cycling should pause when hovering over the content (touchStart on touch devices)
+   */
+  pauseOnHover?: boolean;
+
   /**
    * Specifies if set of slide position indicators is shown
    */

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -1046,6 +1046,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
 
             isInfinite={true}
             indicatorShape={CarouselIndicatorShape.circle}
+            pauseOnHover={true}
 
             element={[
               {