Skip to content

Commit d3a8403

Browse files
kimcoderkimcoder
authored
Merge pull request #31 from kimcoder/feature/issue-27
Feature/issue 27
2 parents 877ba89 + 2100b3a commit d3a8403

18 files changed

+2882
-1420
lines changed

‎.babelrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@
55
{
66
"useBuiltIns": "usage",
77
"modules": false,
8+
"corejs": 3,
89
"targets": "> 0.25%, not dead"
910
}
1011
],
1112
"@babel/preset-react",
1213
"@babel/preset-typescript"
1314
],
1415
"plugins": [
15-
"@babel/plugin-transform-runtime",
1616
"@babel/plugin-proposal-class-properties"
1717
],
1818
"ignore": ["node_modules/**"]

‎.editorconfig

-13
This file was deleted.

‎.prettierignore

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
11
dist
2-
src
3-
example
4-
webpack.config.js
2+
example/index.js
53
*.json
6-
*.md
74
.babelrc

‎.prettierrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"tabWidth": 2,
33
"singleQuote": true,
4-
"printWidth": 120,
4+
"printWidth": 150,
55
"bracketSpacing": true,
66
"jsxBracketSameLine": true,
77
"useTabs": false,

‎README.md

+65-55
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,30 @@
11
# react-simple-image-slider
2+
23
[![ReactJs][react-image]][react-url]
34
[![Download Count][download-image]][download-url]
45
[![GitHub license][license-image]][license-url]
56

6-
[react-image]: https://img.shields.io/badge/ReactJS-%5E16.4.2-blue.svg
7+
[react-image]: https://img.shields.io/badge/ReactJS-%5E16.13.1-blue.svg
78
[react-url]: https://reactjs.org
89
[download-image]: http://img.shields.io/npm/dm/react-simple-image-slider.svg?style=flat
910
[download-url]: http://www.npmjs.com/package/react-simple-image-slider
1011
[license-image]: https://img.shields.io/badge/license-MIT-blue.svg
1112
[license-url]: https://github.com/kimcoder/react-simple-image-slider/blob/master/LICENSE
1213

1314
Simple ImageSlider Component for ReactJS v16.13<br>
15+
1416
- Just Two Elements will be used. (for display images)
15-
- Support GPU Render, by default.
17+
- Support GPU Render, by default.
1618
- Support Image Preload.
1719
- Selectable Navgation Styles.
1820

19-
# Live demo
20-
- <a href="https://kimcoder.github.io/demo/react-simple-image-slider/" target="_blank">Go to Site</a><br><br>
21-
![demo gif](https://github.com/kimcoder/react-simple-image-slider/raw/master/demo.gif)
21+
# Live demo
2222

23+
- <a href="https://kimcoder.github.io/demo/react-simple-image-slider/" target="_blank">Go to Site</a><br><br>
24+
![demo gif](https://github.com/kimcoder/react-simple-image-slider/raw/master/demo.gif)
2325

2426
# Install
27+
2528
```
2629
// npm
2730
npm install react-simple-image-slider --save
@@ -31,69 +34,74 @@ yarn add react-simple-image-slider
3134
```
3235

3336
# Usage
37+
3438
```
3539
import SimpleImageSlider from "react-simple-image-slider";
3640
37-
class App extends React.Component {
38-
render() {
39-
const images = [
40-
{ url: "images/1.jpg" },
41-
{ url: "images/2.jpg" },
42-
{ url: "images/3.jpg" },
43-
{ url: "images/4.jpg" },
44-
{ url: "images/5.jpg" },
45-
{ url: "images/6.jpg" },
46-
{ url: "images/7.jpg" },
47-
];
48-
49-
return (
50-
<div>
51-
<SimpleImageSlider
52-
width={896}
53-
height={504}
54-
images={images}
55-
/>
56-
</div>
57-
);
58-
}
41+
const images = [
42+
{ url: "images/1.jpg" },
43+
{ url: "images/2.jpg" },
44+
{ url: "images/3.jpg" },
45+
{ url: "images/4.jpg" },
46+
{ url: "images/5.jpg" },
47+
{ url: "images/6.jpg" },
48+
{ url: "images/7.jpg" },
49+
];
50+
51+
const App = () => {
52+
return (
53+
<div>
54+
<SimpleImageSlider
55+
width={896}
56+
height={504}
57+
images={images}
58+
/>
59+
</div>
60+
);
5961
}
6062
```
63+
6164
If You want to see more detail source,<br>
62-
- [`example/App.jsx`](https://github.com/kimcoder/react-simple-image-slider/blob/master/example/App.jsx)<br>
65+
66+
- [`example/App.tsx`](https://github.com/kimcoder/react-simple-image-slider/blob/master/example/App.tsx)<br>
6367

6468
# Props
65-
|Name|Type|Required|Description|Default|
66-
|:--:|:--:|:-----:|:----------|:------|
67-
|**width**|`Number`|`Required`|Image Slider Width||
68-
|**height**|`Number`|`Required`|Image Slider Height||
69-
|**images**|`Array`|`Required`|Images,<br>Array Elements should be like this structure,<br>{ url: "" }||
70-
|**style**|`String`|`Optional`|css object||
71-
|**slideDuration**|`Number`|`Optional`|css transition-duration property|`0.5`|
72-
|**navStyle**|`Number`|`Optional`|Arrow Navgation Style,<br>1 or 2|`1`|
73-
|**showNavs**|`Boolean`|`Optional`|Toggle Arrow Navgation|`true`|
74-
|**showBullets**|`Boolean`|`Optional`|Toggle Bullets|`true`|
75-
|**useGPURender**|`Boolean`|`Optional`|Toggle GPU Render|`true`|
76-
|**bgColor**|`String`|`Optional`|slider container's css background-color property|`#000000`|
77-
|**onClick**|`Function`|`Optional`|Image Click Callback function,<br>`onClick = (idx, event) => { }`<br>idx : number : clicked bullet index (begin from 0)||
78-
|**onClickNav**|`Function`|`Optional`|Arrow Navigation Callback function,<br>`onClickNav = (toRight) => { }`<br>toRight : Boolean : slide direction||
79-
|**onClickBullets**|`Function`|`Optional`|Bullets Callback function,<br>`onClickBullets = (idx) => { }`<br>idx : Number : clicked bullet index (begin from 0)||
80-
|**onStartSlide**|`Function`|`Optional`|Slide Transition Start function,<br>`onStartSlide = (idx, length) => { }`<br>idx : Number : start index (begin from 1)<br>length : Number : image length||
81-
|**onCompleteSlide**|`Function`|`Optional`|Slide TransitionEnd Callback function,<br>`onCompleteSlide = (idx, length) => { }`<br>idx : Number : start index (begin from 1)<br>length : Number : image length||
69+
70+
| Name | Type | Required | Description | Default |
71+
| :-----------------: | :--------: | :--------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------- |
72+
| **width** | `Number` | `Required` | Image Slider Width | |
73+
| **height** | `Number` | `Required` | Image Slider Height | |
74+
| **images** | `Array` | `Required` | Images,<br>Array Elements should be like this structure,<br>{ url: "" } | |
75+
| **style** | `String` | `Optional` | css object | |
76+
| **slideDuration** | `Number` | `Optional` | css transition-duration property | `0.5` |
77+
| **navStyle** | `Number` | `Optional` | Arrow Navgation Style,<br>1 or 2 | `1` |
78+
| **showNavs** | `Boolean` | `Optional` | Toggle Arrow Navgation | `true` |
79+
| **showBullets** | `Boolean` | `Optional` | Toggle Bullets | `true` |
80+
| **useGPURender** | `Boolean` | `Optional` | Toggle GPU Render | `true` |
81+
| **bgColor** | `String` | `Optional` | slider container's css background-color property | `#000000` |
82+
| **onClick** | `Function` | `Optional` | Image Click Callback function,<br>`onClick = (idx, event) => { }`<br>idx : number : clicked bullet index (begin from 0) | |
83+
| **onClickNav** | `Function` | `Optional` | Arrow Navigation Callback function,<br>`onClickNav = (toRight) => { }`<br>toRight : Boolean : slide direction | |
84+
| **onClickBullets** | `Function` | `Optional` | Bullets Callback function,<br>`onClickBullets = (idx) => { }`<br>idx : Number : clicked bullet index (begin from 0) | |
85+
| **onStartSlide** | `Function` | `Optional` | Slide Transition Start function,<br>`onStartSlide = (idx, length) => { }`<br>idx : Number : start index (begin from 1)<br>length : Number : image length | |
86+
| **onCompleteSlide** | `Function` | `Optional` | Slide TransitionEnd Callback function,<br>`onCompleteSlide = (idx, length) => { }`<br>idx : Number : start index (begin from 1)<br>length : Number : image length | |
8287

8388
If You want to see more detail,<br>
84-
- [`src/ImageSliderPropTypes.js`](https://github.com/kimcoder/react-simple-image-slider/blob/master/src/ImageSliderPropTypes.js)
85-
- [`example/app.jsx`](https://github.com/kimcoder/react-simple-image-slider/blob/master/example/App.jsx)<br>
89+
90+
- [`example/app.tsx`](https://github.com/kimcoder/react-simple-image-slider/blob/master/example/App.tsx)<br>
8691

8792
# Development
93+
8894
### directory & source
89-
- ``./example/`` : demo site souce for testing component
90-
- ``./src/`` : image slider component source
91-
- ``./dist/`` : image slider component distribution
92-
- ``./babelrc`` : babel configure. (version 7.x)
93-
- ``./webpack.config.js`` : webpack configure. (version 4.x)
94-
- ``./rollup.config.js`` : rollup configure.
95+
96+
- `./example/` : demo site souce for testing component
97+
- `./src/` : image slider component source
98+
- `./dist/` : image slider component distribution
99+
- `./babelrc` : babel configure. (version 7.x)
100+
- `./webpack.config.js` : webpack configure. (version 4.x)
101+
- `./rollup.config.js` : rollup configure.
95102

96103
### scripts
104+
97105
```
98106
// npm
99107
npm run example // run a test app(demo) by webpack dev server
@@ -105,10 +113,12 @@ yarn example
105113
yarn build
106114
yarn build:watch
107115
```
116+
108117
If you want to run a test app, should build before do that.<br>
109118

110119
After run example by webpack dev server,<br>
111-
open ``http://localhost:8080/`` in a browser<br>
120+
open `http://localhost:8080/` in a browser<br>
112121

113122
# License
114-
MIT
123+
124+
MIT

‎example/App.jsx

-165
This file was deleted.

0 commit comments

Comments
 (0)