diff --git a/README.md b/README.md index 297b147..031c8e5 100644 --- a/README.md +++ b/README.md @@ -75,6 +75,8 @@ If You want to see more detail source,
| **style** | `String` | `Optional` | css object | | | **slideDuration** | `Number` | `Optional` | css transition-duration property | `0.5` | | **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` | | **showBullets** | `Boolean` | `Optional` | Toggle Bullets | `true` | | **useGPURender** | `Boolean` | `Optional` | Toggle GPU Render | `true` | diff --git a/example/App.tsx b/example/App.tsx index 7df7690..987b55d 100644 --- a/example/App.tsx +++ b/example/App.tsx @@ -12,6 +12,7 @@ import InputLabel from '@material-ui/core/InputLabel'; import MenuItem from '@material-ui/core/MenuItem'; import Select from '@material-ui/core/Select'; import SimpleImageSlider from '../dist'; +import Input from '@material-ui/core/Input'; const IMAGES = [ { url: 'images/1.jpg' }, @@ -28,6 +29,8 @@ type SliderOptions = { showNavs: boolean; showBullets: boolean; navStyle: 1 | 2; + navSize: number; + navMargin: number; duration: number; bgColor: string; }; @@ -38,6 +41,8 @@ const App: React.FC = () => { showNavs: true, showBullets: true, navStyle: 1, + navSize: 50, + navMargin: 30, duration: 0.5, bgColor: '#000' }); @@ -70,23 +75,17 @@ const App: React.FC = () => { (key: string, value: boolean | number | string) => () => { console.log(`[App updateOptions] ${key} ${value}`); switch (key) { - case 'useGPURender': - setSliderOptions({ ...sliderOptions, useGPURender: value as boolean }); - break; - case 'showNavs': - setSliderOptions({ ...sliderOptions, showNavs: value as boolean }); - break; - case 'showBullets': - setSliderOptions({ ...sliderOptions, showBullets: value as boolean }); - break; case 'navStyle': setSliderOptions({ ...sliderOptions, navStyle: value as 1 | 2 }); break; + case 'useGPURender': + case 'showNavs': + case 'showBullets': case 'duration': - setSliderOptions({ ...sliderOptions, duration: value as number }); - break; case 'bgColor': - setSliderOptions({ ...sliderOptions, bgColor: value as string }); + case 'navSize': + case 'navMargin': + setSliderOptions({ ...sliderOptions, [key]: value }); break; } }, @@ -125,6 +124,8 @@ const App: React.FC = () => { showNavs={sliderOptions.showNavs} useGPURender={sliderOptions.useGPURender} navStyle={sliderOptions.navStyle} + navSize={sliderOptions.navSize} + navMargin={sliderOptions.navMargin} slideDuration={sliderOptions.duration} onClick={onClick} onClickNav={onClickNav} @@ -151,7 +152,7 @@ const App: React.FC = () => { ))} - + NavStyle + + + Navigation Size + updateOptions(event.target.name, event.target.value)()} + /> + + + + + Navigation Margin + updateOptions(event.target.name, event.target.value)()} + /> + + ); diff --git a/package.json b/package.json index 9eb3331..7924514 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-simple-image-slider", - "version": "2.0.4", + "version": "2.1.0", "description": "simple image slider component for react", "main": "dist/index.js", "scripts": { diff --git a/src/ImageSlider.tsx b/src/ImageSlider.tsx index b1728ae..0ac2109 100644 --- a/src/ImageSlider.tsx +++ b/src/ImageSlider.tsx @@ -14,6 +14,8 @@ export type SimpleImageSliderProps = { slideDuration?: number; bgColor?: string; useGPURender?: boolean; + navSize?: number; + navMargin?: number; navStyle?: ImageSliderNavStyle; onClick?: (idx: number, event: React.SyntheticEvent) => void; onClickNav?: (toRight: boolean) => void; @@ -32,6 +34,8 @@ const SimpleImageSlider: React.FC = ({ slideDuration = 0.5, bgColor = '#000', useGPURender = true, + navSize = 50, + navMargin = 30, navStyle = ImageSliderNavStyle.NORMAL, onClick = undefined, onClickNav = undefined, @@ -125,10 +129,22 @@ const SimpleImageSlider: React.FC = ({ {/* Render Navigation */} {showNavs && images.length > 0 && slideIdx > 0 && ( - + )} {showNavs && images.length > 0 && slideIdx < images.length - 1 && ( - + )} {/* Render Bullets */} diff --git a/src/ImageSliderNavigation.tsx b/src/ImageSliderNavigation.tsx index 2f36cf9..56de2d6 100644 --- a/src/ImageSliderNavigation.tsx +++ b/src/ImageSliderNavigation.tsx @@ -1,9 +1,7 @@ import React from 'react'; import styles from './ImageSliderStyle'; -import ImageNavArrowLeft1 from './images/arrow-left-1.png'; -import ImageNavArrowLeft2 from './images/arrow-left-2.png'; -import ImageNavArrowRight1 from './images/arrow-right-1.png'; -import ImageNavArrowRight2 from './images/arrow-right-2.png'; +import ImageNavArrowBold from './images/arrow-bold.svg'; +import ImageNavArrowNormal from './images/arrow-normal.svg'; export enum ImageSliderNavStyle { NORMAL = 1, @@ -17,27 +15,21 @@ export enum ImageSliderNavDirection { type ImageSliderNavigationProps = { navStyle: ImageSliderNavStyle; + navSize: number; + navMargin: number; direction: ImageSliderNavDirection; onClickNav: (direction: ImageSliderNavDirection) => (event: React.SyntheticEvent) => void; }; const altNavArrowLeft = 'slide to left'; const altNavArrowRight = 'slide to right'; -const images: { [key: string]: string } = { - [`image-${ImageSliderNavDirection.LEFT}-${ImageSliderNavStyle.NORMAL}`]: ImageNavArrowLeft1, - [`image-${ImageSliderNavDirection.RIGHT}-${ImageSliderNavStyle.NORMAL}`]: ImageNavArrowRight1, - [`image-${ImageSliderNavDirection.LEFT}-${ImageSliderNavStyle.BOLD}`]: ImageNavArrowLeft2, - [`image-${ImageSliderNavDirection.RIGHT}-${ImageSliderNavStyle.BOLD}`]: ImageNavArrowRight2 -}; const ImageSliderNavigation: React.FC = (props: ImageSliderNavigationProps) => { return ( - diff --git a/src/ImageSliderStyle.ts b/src/ImageSliderStyle.ts index c32a173..0d384c7 100644 --- a/src/ImageSliderStyle.ts +++ b/src/ImageSliderStyle.ts @@ -1,3 +1,5 @@ +import { ImageSliderNavDirection } from './ImageSliderNavigation'; + const basic = { display: 'block', margin: '0', @@ -69,5 +71,13 @@ export default { transition: `${duration}s`, backgroundImage: `url(${url})`, transform: isGpuRender ? `translate3d(${idx * 100}%, 0px, 0px)` : `translate(${idx * 100}%, 0px)` + } as React.CSSProperties), + getNavStyle: (direction: ImageSliderNavDirection, size: number, margin: number): React.CSSProperties => + ({ + ...basic, + ...basicNav, + ...(direction === ImageSliderNavDirection.LEFT ? { left: `${margin}px` } : { right: `${margin}px` }), + marginTop: `-${Math.floor(size / 2)}px`, + width: `${size}px` } as React.CSSProperties) }; diff --git a/src/global.d.ts b/src/global.d.ts index 5eec77f..4210c53 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -2,3 +2,8 @@ declare module '*.png' { const value: string; export = value; } + +declare module '*.svg' { + const value: string; + export = value; +} diff --git a/src/images/arrow-bold.svg b/src/images/arrow-bold.svg new file mode 100644 index 0000000..8719b08 --- /dev/null +++ b/src/images/arrow-bold.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/arrow-left-1.png b/src/images/arrow-left-1.png deleted file mode 100644 index de4ef3d..0000000 Binary files a/src/images/arrow-left-1.png and /dev/null differ diff --git a/src/images/arrow-left-2.png b/src/images/arrow-left-2.png deleted file mode 100644 index b6ee181..0000000 Binary files a/src/images/arrow-left-2.png and /dev/null differ diff --git a/src/images/arrow-normal.svg b/src/images/arrow-normal.svg new file mode 100644 index 0000000..55d79f4 --- /dev/null +++ b/src/images/arrow-normal.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/arrow-right-1.png b/src/images/arrow-right-1.png deleted file mode 100644 index 22aa8be..0000000 Binary files a/src/images/arrow-right-1.png and /dev/null differ diff --git a/src/images/arrow-right-2.png b/src/images/arrow-right-2.png deleted file mode 100644 index 8b9b112..0000000 Binary files a/src/images/arrow-right-2.png and /dev/null differ