├── .babelrc
├── .gitignore
├── .nvmrc
├── .prettierrc
├── LICENSE
├── README.md
├── build
└── index.js
├── package-lock.json
├── package.json
├── slidez.png
├── src
├── Arrows.js
├── Slideshow.css
└── index.js
├── webpack.config.js
└── yarn.lock
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["env"],
3 | "plugins": ["transform-object-rest-spread", "transform-react-jsx"]
4 | }
5 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 |
--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | v6.10
2 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "singleQuote": true
3 | }
4 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 Paul Fitzgerald
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React Slidez
2 |
3 |
4 |
5 |
6 |
7 | ✨
8 | Customisable React Slideshow component.✨
9 |
10 |
11 | ## Demo
12 |
13 | 💪
14 | [Live demo](http://pau1fitz.github.io/react-slidez/)
15 | 💪
16 |
17 | ## Installation
18 |
19 | ```
20 | npm install react-slidez --save
21 | ```
22 |
23 | ### Properties
24 |
25 | | Property | Description | Type | Default |
26 | | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------- |
27 | | showIndex | Show the index of the current slide | Boolean | `false` |
28 | | showArrows | Show arrows to navigate through the slides | Boolean | `true` |
29 | | autoplay | Select whether you want the slideshow to autoplay or not | Boolean | `true` |
30 | | enableKeyboard | Select whether you want to allow the user change the slides with the keyboard | Boolean | `true` |
31 | | useDotIndex | Select whether you want the index to be dots or numbers | Boolean | `false` |
32 | | slideInterval | Dictate the speed in ms at which the slides change | Integer | `2000` |
33 | | defaultIndex | Choose the index that you wish to start at | Integer | `0` |
34 | | slides | The slides you pass into the component. This can be an array of images, or other components which are passed as children. See example below. | Array | No default |
35 | | effect | Choose the animation effect of your slideshow. Options include `fade`, `left`, `top`, `right`, `bottom`, `bounce-right`, `bounce-left` | String | `"fade"` |
36 | | height | Choose the height of the slideshow. Example `height={'50px'}` or `height={'50%'}` | String | `"100%"` |
37 | | width | Choose the width of the slideshow. Example `width="50px"` or `width="50%"` | String | `"100%"` |
38 |
39 | ## Usage
40 |
41 | ```js
42 | const Slideshow = require("react-slidez");
43 |
44 |
57 | ```
58 |
59 | You can also pass other components to the `Slideshow` component as children. All the same properties as above are available.
60 |
61 | ```js
62 | const Slideshow = require("react-slidez");
63 |
64 |
65 |
66 |
67 |
68 |
69 | ```
70 |
71 | ## License
72 |
73 | [MIT License](https://opensource.org/licenses/MIT)
74 |
75 | Copyright (c) 2017 Paul Fitzgerald
76 |
--------------------------------------------------------------------------------
/build/index.js:
--------------------------------------------------------------------------------
1 | module.exports =
2 | /******/ (function(modules) { // webpackBootstrap
3 | /******/ // The module cache
4 | /******/ var installedModules = {};
5 | /******/
6 | /******/ // The require function
7 | /******/ function __webpack_require__(moduleId) {
8 | /******/
9 | /******/ // Check if module is in cache
10 | /******/ if(installedModules[moduleId]) {
11 | /******/ return installedModules[moduleId].exports;
12 | /******/ }
13 | /******/ // Create a new module (and put it into the cache)
14 | /******/ var module = installedModules[moduleId] = {
15 | /******/ i: moduleId,
16 | /******/ l: false,
17 | /******/ exports: {}
18 | /******/ };
19 | /******/
20 | /******/ // Execute the module function
21 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
22 | /******/
23 | /******/ // Flag the module as loaded
24 | /******/ module.l = true;
25 | /******/
26 | /******/ // Return the exports of the module
27 | /******/ return module.exports;
28 | /******/ }
29 | /******/
30 | /******/
31 | /******/ // expose the modules object (__webpack_modules__)
32 | /******/ __webpack_require__.m = modules;
33 | /******/
34 | /******/ // expose the module cache
35 | /******/ __webpack_require__.c = installedModules;
36 | /******/
37 | /******/ // identity function for calling harmony imports with the correct context
38 | /******/ __webpack_require__.i = function(value) { return value; };
39 | /******/
40 | /******/ // define getter function for harmony exports
41 | /******/ __webpack_require__.d = function(exports, name, getter) {
42 | /******/ if(!__webpack_require__.o(exports, name)) {
43 | /******/ Object.defineProperty(exports, name, {
44 | /******/ configurable: false,
45 | /******/ enumerable: true,
46 | /******/ get: getter
47 | /******/ });
48 | /******/ }
49 | /******/ };
50 | /******/
51 | /******/ // getDefaultExport function for compatibility with non-harmony modules
52 | /******/ __webpack_require__.n = function(module) {
53 | /******/ var getter = module && module.__esModule ?
54 | /******/ function getDefault() { return module['default']; } :
55 | /******/ function getModuleExports() { return module; };
56 | /******/ __webpack_require__.d(getter, 'a', getter);
57 | /******/ return getter;
58 | /******/ };
59 | /******/
60 | /******/ // Object.prototype.hasOwnProperty.call
61 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
62 | /******/
63 | /******/ // __webpack_public_path__
64 | /******/ __webpack_require__.p = "";
65 | /******/
66 | /******/ // Load entry module and return exports
67 | /******/ return __webpack_require__(__webpack_require__.s = 3);
68 | /******/ })
69 | /************************************************************************/
70 | /******/ ([
71 | /* 0 */
72 | /***/ (function(module, exports, __webpack_require__) {
73 |
74 | // style-loader: Adds some css to the DOM by adding a