Fix click event bug on scroll

src/components/scrolling-carousel/index.tsx

@@ -58,12 +58,13 @@ export const ScrollingCarousel: FunctionComponent<SliderProps> = ({
 	const mouseUp = (_: MouseEvent) => {
 		setIsDown(false);
 		setShowArrow(showArrows());
+		slider.current!.classList.remove(styles.sliding);
 	};
 
 	const mouseMove = (e: MouseEvent) => {
 		if (!isDown) return;
 		e.preventDefault();
-
+		slider.current!.classList.add(styles.sliding);
 		const eventPosition = e.pageX - slider.current!.offsetLeft;
 		const slide = eventPosition - position.startX;
 

src/styles/slider/styles.module.css

@@ -18,3 +18,7 @@
 .slider > * {
 	flex: 0 0 auto;
 }
+
+.sliding > * {
+	pointer-events: none;
+}

src/styles/slider/styles.module.css.d.ts

@@ -1,8 +1,10 @@
 export const sliderBase: string;
 export const slider: string;
+export const sliding: string;
 interface Namespace {
 	sliderBase: string;
 	slider: string;
+	sliding: string;
 }
 declare const stylesModule: Namespace;
 export default stylesModule;

website/docs/scrollingCarousel.md

@@ -12,7 +12,9 @@ const slideData = [{"text":"skyline","img":"data:image/jpeg;base64,/9j/4AAQSkZJR
 <ScrollingCarousel className="scrolling-carousel-example1">
 {
   slideData.map((d, i) => 
-    <div key={i} style={{
+    <div key={i}
+      onClick={() => console.log('CLICK')}
+      style={{
       cursor: "pointer",
       display: "flex",
       border: "1px solid #DFE1E5",