diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6899a13..f74d1a2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,10 @@
# Change Log
+### 2.1.2 (June 16, 2021)
+
+- add 'startIndex' props.
+ - can set start index of image slider
+
### 2.1.1 (June 16, 2021)
- fix issue in SSR mode
diff --git a/README.md b/README.md
index 9cccd24..30f3bac 100644
--- a/README.md
+++ b/README.md
@@ -78,7 +78,8 @@ If You want to see more detail source,
| **navStyle** | `Number` | `Optional` | Arrow Navgation Style,
1 or 2 | `1` |
| **navSize** | `Number` | `Optional` | Arrow Size | 50 |
| **navMargin** | `Number` | `Optional` | Arrow Margin | 30 |
-| **showNavs** | `Boolean` | `Optional` | Toggle Arrow Navgation | `true` |
+| **showNavs** | `Boolean` | `Optional` | Toggle Arrow |
+| **startIndex** | `Number` | `Optional` | start Index of Slide | 0 |
| **showBullets** | `Boolean` | `Optional` | Toggle Bullets | `true` |
| **useGPURender** | `Boolean` | `Optional` | Toggle GPU Render | `true` |
| **bgColor** | `String` | `Optional` | slider container's css background-color property | `#000000` |
diff --git a/example/App.tsx b/example/App.tsx
index 987b55d..b80fd7a 100644
--- a/example/App.tsx
+++ b/example/App.tsx
@@ -122,6 +122,7 @@ const App: React.FC = () => {
images={IMAGES}
showBullets={sliderOptions.showBullets}
showNavs={sliderOptions.showNavs}
+ startIndex={0}
useGPURender={sliderOptions.useGPURender}
navStyle={sliderOptions.navStyle}
navSize={sliderOptions.navSize}
diff --git a/package.json b/package.json
index 3b01608..e41f171 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "react-simple-image-slider",
- "version": "2.1.1",
+ "version": "2.1.2",
"description": "simple image slider component for react",
"main": "dist/index.js",
"scripts": {
diff --git a/src/ImageSlider.tsx b/src/ImageSlider.tsx
index 0ac2109..7e80e96 100644
--- a/src/ImageSlider.tsx
+++ b/src/ImageSlider.tsx
@@ -11,6 +11,7 @@ export type SimpleImageSliderProps = {
style?: React.CSSProperties;
showNavs: boolean;
showBullets: boolean;
+ startIndex?: number;
slideDuration?: number;
bgColor?: string;
useGPURender?: boolean;
@@ -30,6 +31,7 @@ const SimpleImageSlider: React.FC = ({
images,
showNavs,
showBullets,
+ startIndex = 0,
style = undefined,
slideDuration = 0.5,
bgColor = '#000',
@@ -44,7 +46,7 @@ const SimpleImageSlider: React.FC = ({
onCompleteSlide = undefined
}: SimpleImageSliderProps) => {
const rootStyle: React.CSSProperties = useMemo(() => styles.getRootContainer(width, height, bgColor), [width, height, bgColor]);
- const [slideIdx, setSlideIdx] = useState(0);
+ const [slideIdx, setSlideIdx] = useState(startIndex < images.length ? startIndex : 0);
const [slideDirection, setSlideDirection] = useState(ImageSliderNavDirection.RIGHT);
const [isSliding, setIsSliding] = useState(false);
const [currentSliderStyle, setCurrentSlideStyle] = useState(styles.getImageSlide(images[0].url, slideDuration, 0, useGPURender));