├── .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