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));