Merge pull request #48 from kimcoder/feature/issue-34

feat: start index props

Author: kimcoder

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

README.md

@@ -78,7 +78,8 @@ If You want to see more detail source,<br>
 |    **navStyle**     |  `Number`  | `Optional` | Arrow Navgation Style,<br>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` |

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}

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": {

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<SimpleImageSliderProps> = ({
   images,
   showNavs,
   showBullets,
+  startIndex = 0,
   style = undefined,
   slideDuration = 0.5,
   bgColor = '#000',
@@ -44,7 +46,7 @@ const SimpleImageSlider: React.FC<SimpleImageSliderProps> = ({
   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));