publish version 1.0.2

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@trendyol-js/react-carousel",
-	"version": "1.0.1",
+	"version": "1.0.2",
 	"description": "Lightweight carousel component for react",
 	"main": "dist/cjs/index.js",
 	"module": "dist/es/index.js",

src/components/arrow/index.tsx

@@ -2,8 +2,13 @@ import React, { FunctionComponent } from 'react';
 import styles from '../../styles/styles.module.css';
 
 export const Arrow: FunctionComponent<ArrowProps> = (props: ArrowProps) => (
-	<button className={styles.carouselArrow} onClick={props.onClick}></button>
+	<button
+		className={styles.carouselArrow}
+		onClick={props.onClick}
+		data-direction={props.direction}
+	/>
 );
 export interface ArrowProps {
 	onClick: (...args: any) => any;
+	direction: string;
 }

src/components/carousel/index.tsx

@@ -112,7 +112,10 @@ export const Carousel: FunctionComponent<CarouselProps> = (userProps: CarouselPr
 			className={`${styles.carouselBase} ${props.className}`}
 		>
 			{showArrow.left && (
-				<Arrow onClick={() => slide(SlideDirection.Left, props.slide)} />
+				<Arrow
+					direction="left"
+					onClick={() => slide(SlideDirection.Left, props.slide)}
+				/>
 			)}
 			<ItemProvider
 				{...props}
@@ -124,7 +127,10 @@ export const Carousel: FunctionComponent<CarouselProps> = (userProps: CarouselPr
 				widthCallBack={widthCallBack}
 			/>
 			{showArrow.right && (
-				<Arrow onClick={() => slide(SlideDirection.Right, props.slide)} />
+				<Arrow
+					direction="right"
+					onClick={() => slide(SlideDirection.Right, props.slide)}
+				/>
 			)}
 		</div>
 	);