react-carousel-slider - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

es/index.js

@@ -59,2 +59,3 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
             margin: "0px 40px"
+            // ,minWidth: "100px" 
         };
@@ -76,4 +77,4 @@
             margin: "10px",
-            "font-size": "20px",
-            "borderRadius": "2px",
+            fontSize: "20px",
+            borderRadius: "2px",
             border: "none"
@@ -106,2 +107,3 @@ };
         _this.imgLoaded = _this.imgLoaded.bind(_this);
+        _this.nonImgLoaded = _this.nonImgLoaded.bind(_this);
         _this.slideItemHandler = _this.slideItemHandler.bind(_this);
@@ -127,3 +129,2 @@ _this.initialSlideCon = _this.initialSlideCon.bind(_this);
         _this.calculateSlidesOrder();
-
         return _this;
@@ -178,4 +179,2 @@ }
         this.slidingManner.slideOrders[2] = former.concat(latter);
-
-        console.log(this.slidingManner.slideOrders);
     };
@@ -191,2 +190,25 @@
 
+    CarouselSlider.prototype.nonImgLoaded = function nonImgLoaded(index) {
+        var refIndex = 'ref' + index;
+        if (this.refs[refIndex]) {
+            var customStyle = this.setItemsStyle();
+            var targetItem = this.refs[refIndex];
+
+            for (var key in customStyle) {
+                targetItem.style[key] = customStyle[key];
+            }
+
+            this.loadedCnt += 1;
+            this.imgsWidth[index] = targetItem.offsetWidth;
+
+            if (!this.mannerSetting.circular && index === 1 || this.mannerSetting.circular && this.slideCnt === 1) {
+                this.initialSlideCon();
+            }
+
+            if (this.mannerSetting.circular && this.loadedCnt === this.slideCnt * 3) {
+                this.initialSlideCon();
+            }
+        }
+    };
+
     CarouselSlider.prototype.imgLoaded = function imgLoaded(index) {
@@ -228,3 +250,3 @@ var refIndex = 'ref' + index;
             case 'prop':
-                var imgElement = slideEl.imgSrc ? React.createElement('img', { src: slideEl.imgSrc }) : React.createElement('img', null);
+                var imgElement = slideEl.imgSrc ? React.createElement('img', { src: slideEl.imgSrc }) : React.createElement('img', { src: slideEl.imgSrc });
                 var desElement = slideEl.des ? React.createElement(
@@ -235,5 +257,8 @@ 'p',
                 ) : null;
+
                 return React.createElement(
                     'div',
-                    { className: 'itemWrapper', style: { order: index }, onLoad: function onLoad() {
+                    { className: 'itemWrapper', style: { order: index }, onError: function onError() {
+                            return _this2.nonImgLoaded(index);
+                        }, onLoad: function onLoad() {
                             return _this2.imgLoaded(index);
@@ -244,2 +269,3 @@ }, onClick: this.handleBubbling, ref: 'ref' + index, key: 'ref' + index },
                 );
+
                 break;
@@ -249,3 +275,5 @@ case 'cpnt':
                     'div',
-                    { className: 'itemWrapper', style: { order: index }, onLoad: function onLoad() {
+                    { className: 'itemWrapper', style: { order: index }, onError: function onError() {
+                            return _this2.nonImgLoaded(index);
+                        }, onLoad: function onLoad() {
                             return _this2.imgLoaded(index);
@@ -266,2 +294,3 @@ }, onClick: this.handleBubbling, ref: "ref" + index, key: "ref" + index },
         });
+
         if (this.mannerSetting.circular && this.slideCnt !== 1) {
@@ -282,2 +311,3 @@ var sum = 0;
         }
+
         slideCon.style.transform = 'translateX(-' + this.slidingManner.initialMovement + 'px)';
@@ -317,3 +347,2 @@ this.slidingManner.movement = this.slidingManner.movement + this.slidingManner.initialMovement;
     CarouselSlider.prototype.itemsReorder = function itemsReorder() {
-        console.log(this.slidingManner.cycle);
         for (var i = 0; i < this.slideCnt * 3; i++) {
@@ -326,4 +355,2 @@ if (i < this.slideCnt) {
         }
-
-        console.log(this.slidingManner.slideOrders[this.slidingManner.cycle]);
     };
@@ -455,3 +482,3 @@
         if (this.props.itemsStyle) {
-            var cloneStyle = this.props.itemsStyle;
+            var cloneStyle = JSON.parse(JSON.stringify(this.props.itemsStyle));
             delete cloneStyle.height; /* height for slideCon */
@@ -466,5 +493,5 @@ return Object.assign({}, this.defaultItemsStyle, cloneStyle);
         if (this.props.itemsStyle) {
-            return this.props.itemsStyle.height ? this.props.itemsStyle.height : this.defaultSlideConStyle.height;
+            return this.props.itemsStyle.height ? { height: this.props.itemsStyle.height } : { height: this.defaultSlideConStyle.height };
         } else {
-            return this.defaultSlideConStyle.height;
+            return { height: this.defaultSlideConStyle.height };
         }
@@ -670,7 +697,7 @@ };
                 if (this.mannerSetting.flag) {
-                    sflag = React.createElement('div', { className: 'flag', ref: 'sflag', style: { order: 0 } });
-                    eflag = React.createElement('div', { className: 'flag', ref: 'eflag', style: { order: this.slideCnt + 1 } });
+                    sflag = React.createElement('div', { className: 'flag', ref: 'sflag', style: { order: 0 }, key: 'sflag' });
+                    eflag = React.createElement('div', { className: 'flag', ref: 'eflag', style: { order: this.slideCnt + 1 }, key: 'eflag' });
                 } else {
-                    sflag = React.createElement('div', { className: 'flag', ref: 'sflag', style: { background: "transparent", order: 0 } });
-                    eflag = React.createElement('div', { className: 'flag', ref: 'eflag', style: { background: "transparent", order: this.slideCnt + 1 } });
+                    sflag = React.createElement('div', { className: 'flag', ref: 'sflag', style: { background: "transparent", order: 0 }, key: 'sflag' });
+                    eflag = React.createElement('div', { className: 'flag', ref: 'eflag', style: { background: "transparent", order: this.slideCnt + 1 }, key: 'eflag' });
                 }
@@ -688,3 +715,3 @@ items = this.slideEls.map(function (slideEl, index) {
                 { className: 'slideCon', ref: 'slideCon',
-                    style: { height: this.setSlideConHeight() },
+                    style: this.setSlideConHeight(),
                     onTouchStart: function onTouchStart(e) {
@@ -702,3 +729,3 @@ return _this6.handleTouchStart(e);
                 'div',
-                { className: 'slideCon', ref: 'slideCon', style: { height: this.setSlideConHeight() } },
+                { className: 'slideCon', ref: 'slideCon', style: this.setSlideConHeight() },
                 items
@@ -705,0 +732,0 @@ );

lib/index.js

@@ -68,2 +68,3 @@ 'use strict';
             margin: "0px 40px"
+            // ,minWidth: "100px" 
         };
@@ -85,4 +86,4 @@
             margin: "10px",
-            "font-size": "20px",
-            "borderRadius": "2px",
+            fontSize: "20px",
+            borderRadius: "2px",
             border: "none"
@@ -115,2 +116,3 @@ };
         _this.imgLoaded = _this.imgLoaded.bind(_this);
+        _this.nonImgLoaded = _this.nonImgLoaded.bind(_this);
         _this.slideItemHandler = _this.slideItemHandler.bind(_this);
@@ -136,3 +138,2 @@ _this.initialSlideCon = _this.initialSlideCon.bind(_this);
         _this.calculateSlidesOrder();
-
         return _this;
@@ -187,4 +188,2 @@ }
         this.slidingManner.slideOrders[2] = former.concat(latter);
-
-        console.log(this.slidingManner.slideOrders);
     };
@@ -200,2 +199,25 @@
 
+    CarouselSlider.prototype.nonImgLoaded = function nonImgLoaded(index) {
+        var refIndex = 'ref' + index;
+        if (this.refs[refIndex]) {
+            var customStyle = this.setItemsStyle();
+            var targetItem = this.refs[refIndex];
+
+            for (var key in customStyle) {
+                targetItem.style[key] = customStyle[key];
+            }
+
+            this.loadedCnt += 1;
+            this.imgsWidth[index] = targetItem.offsetWidth;
+
+            if (!this.mannerSetting.circular && index === 1 || this.mannerSetting.circular && this.slideCnt === 1) {
+                this.initialSlideCon();
+            }
+
+            if (this.mannerSetting.circular && this.loadedCnt === this.slideCnt * 3) {
+                this.initialSlideCon();
+            }
+        }
+    };
+
     CarouselSlider.prototype.imgLoaded = function imgLoaded(index) {
@@ -237,3 +259,3 @@ var refIndex = 'ref' + index;
             case 'prop':
-                var imgElement = slideEl.imgSrc ? _react2.default.createElement('img', { src: slideEl.imgSrc }) : _react2.default.createElement('img', null);
+                var imgElement = slideEl.imgSrc ? _react2.default.createElement('img', { src: slideEl.imgSrc }) : _react2.default.createElement('img', { src: slideEl.imgSrc });
                 var desElement = slideEl.des ? _react2.default.createElement(
@@ -244,5 +266,8 @@ 'p',
                 ) : null;
+
                 return _react2.default.createElement(
                     'div',
-                    { className: 'itemWrapper', style: { order: index }, onLoad: function onLoad() {
+                    { className: 'itemWrapper', style: { order: index }, onError: function onError() {
+                            return _this2.nonImgLoaded(index);
+                        }, onLoad: function onLoad() {
                             return _this2.imgLoaded(index);
@@ -253,2 +278,3 @@ }, onClick: this.handleBubbling, ref: 'ref' + index, key: 'ref' + index },
                 );
+
                 break;
@@ -258,3 +284,5 @@ case 'cpnt':
                     'div',
-                    { className: 'itemWrapper', style: { order: index }, onLoad: function onLoad() {
+                    { className: 'itemWrapper', style: { order: index }, onError: function onError() {
+                            return _this2.nonImgLoaded(index);
+                        }, onLoad: function onLoad() {
                             return _this2.imgLoaded(index);
@@ -275,2 +303,3 @@ }, onClick: this.handleBubbling, ref: "ref" + index, key: "ref" + index },
         });
+
         if (this.mannerSetting.circular && this.slideCnt !== 1) {
@@ -291,2 +320,3 @@ var sum = 0;
         }
+
         slideCon.style.transform = 'translateX(-' + this.slidingManner.initialMovement + 'px)';
@@ -326,3 +356,2 @@ this.slidingManner.movement = this.slidingManner.movement + this.slidingManner.initialMovement;
     CarouselSlider.prototype.itemsReorder = function itemsReorder() {
-        console.log(this.slidingManner.cycle);
         for (var i = 0; i < this.slideCnt * 3; i++) {
@@ -335,4 +364,2 @@ if (i < this.slideCnt) {
         }
-
-        console.log(this.slidingManner.slideOrders[this.slidingManner.cycle]);
     };
@@ -464,3 +491,3 @@
         if (this.props.itemsStyle) {
-            var cloneStyle = this.props.itemsStyle;
+            var cloneStyle = JSON.parse(JSON.stringify(this.props.itemsStyle));
             delete cloneStyle.height; /* height for slideCon */
@@ -475,5 +502,5 @@ return Object.assign({}, this.defaultItemsStyle, cloneStyle);
         if (this.props.itemsStyle) {
-            return this.props.itemsStyle.height ? this.props.itemsStyle.height : this.defaultSlideConStyle.height;
+            return this.props.itemsStyle.height ? { height: this.props.itemsStyle.height } : { height: this.defaultSlideConStyle.height };
         } else {
-            return this.defaultSlideConStyle.height;
+            return { height: this.defaultSlideConStyle.height };
         }
@@ -679,7 +706,7 @@ };
                 if (this.mannerSetting.flag) {
-                    sflag = _react2.default.createElement('div', { className: 'flag', ref: 'sflag', style: { order: 0 } });
-                    eflag = _react2.default.createElement('div', { className: 'flag', ref: 'eflag', style: { order: this.slideCnt + 1 } });
+                    sflag = _react2.default.createElement('div', { className: 'flag', ref: 'sflag', style: { order: 0 }, key: 'sflag' });
+                    eflag = _react2.default.createElement('div', { className: 'flag', ref: 'eflag', style: { order: this.slideCnt + 1 }, key: 'eflag' });
                 } else {
-                    sflag = _react2.default.createElement('div', { className: 'flag', ref: 'sflag', style: { background: "transparent", order: 0 } });
-                    eflag = _react2.default.createElement('div', { className: 'flag', ref: 'eflag', style: { background: "transparent", order: this.slideCnt + 1 } });
+                    sflag = _react2.default.createElement('div', { className: 'flag', ref: 'sflag', style: { background: "transparent", order: 0 }, key: 'sflag' });
+                    eflag = _react2.default.createElement('div', { className: 'flag', ref: 'eflag', style: { background: "transparent", order: this.slideCnt + 1 }, key: 'eflag' });
                 }
@@ -697,3 +724,3 @@ items = this.slideEls.map(function (slideEl, index) {
                 { className: 'slideCon', ref: 'slideCon',
-                    style: { height: this.setSlideConHeight() },
+                    style: this.setSlideConHeight(),
                     onTouchStart: function onTouchStart(e) {
@@ -711,3 +738,3 @@ return _this6.handleTouchStart(e);
                 'div',
-                { className: 'slideCon', ref: 'slideCon', style: { height: this.setSlideConHeight() } },
+                { className: 'slideCon', ref: 'slideCon', style: this.setSlideConHeight() },
                 items
@@ -714,0 +741,0 @@ );

package.json

 {
   "name": "react-carousel-slider",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "react-carousel-slider React component",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -1,16 +0,155 @@
-# react-carousel-slider
-
-[![Travis][build-badge]][build]
+# React Carousel Slider
 [![npm package][npm-badge]][npm]
-[![Coveralls][coveralls-badge]][coveralls]
 
-Describe react-carousel-slider here.
+A React component that endeavors to provide flexbility for customizing carousel/slider.
 
-[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
-[build]: https://travis-ci.org/user/repo
+## Installation
 
-[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
-[npm]: https://www.npmjs.org/package/npm-package
+Install it from npm.
 
-[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
-[coveralls]: https://coveralls.io/github/user/repo
+```js
+npm install react-carousel-slider
+```
+As ES module:
+```js
+import CarouselSlider from "react-carousel-slider"
+```
+As CommonJS module:
+```js
+var CarouselSlider = require("react-carousel-slider")
+```
+
+The UMD build:
+```html 
+<script src="https://unpkg.com/react-carousel-slider/umd/react-carousel-slider.js"></script>
+```
+## Demo & Examples
+
+ [carr1005.github.io/react-carousel-slider/index.html](http://carr1005.github.io/react-carousel-slider/index.html)
+
+## Usage
+
+We could render a <CarouselSlider> component with the `slideItems` prop which accepts an array of objects with the specific simple sturcture and keys in default style.
+
+```jsx
+
+import React, {Component} from 'react'
+import CarouselSlider from 'react-carousel-slider';
+
+class App extends Component {
+    render() {
+    
+        let data = [
+            {
+                des: "1",
+                imgSrc: "https://i.imqur.com/yourImage.jpg"
+            },
+            {
+                des: "2",
+                imgSrc: "https://i.imqur.com/yourImage2.jpg"
+            }
+        ];
+        
+        return <CarouselSlider slideItems = {data} />;
+    }
+}
+```
+Or give an array of your own regular React elements to `slideCpnts` prop, this lets our slide have availability to contain a clickable link. Even cooperating with `<Link>` component of [React Router](https://github.com/ReactTraining/react-router) library for client side routing is possible.
+
+```jsx
+
+import React, {Component} from 'react'
+import CarouselSlider from 'react-carousel-slider';
+import {BrowserRouter as Router, Link } from 'react-router-dom';
+
+class App extends Component {
+    render() {
+    
+        let jsonData = require('./slidesExample.json');
+        /*
+            {
+                "items": [
+                    {
+                        "des": "1",
+                        "imgSrc": "https://i.imqur.com/yourImage.jpg"
+                    },
+                    {
+                        "des": "2",
+                        "imgSrc": "https://i.imqur.com/yourImage2.jpg"
+                    }
+                ] 
+            }
+        */
+        
+        let items = jsonData.items.map((item, index) => 
+            <Link to = {'/' + item.des} >
+                <img src = {item.imgSrc} ></img>
+                <p>{item.des}</p>
+            </Link>
+        );
+        
+        return (<Router>
+            <CarouselSlider slideCpnts = {items} />
+        </Router>);
+    }
+}
+```
+
+## Allowable Props
+
+
+* [`slidesItems`](#slidesItems)
+* [`slidesCpnts`](#slidesCpnts)
+
+* `slidesItems` <a id="slidesItems"></a> -  accepts an array of objects, specific structure and keys are required.
+```js
+    [
+        {
+            des: "1",
+            imgSrc: "https://i.imqur.com/yourImage.jpg"
+        },
+        {
+            des: "2",
+            imgSrc: "https://i.imqur.com/yourImage2.jpg"
+        }
+    ]
+```
+* `slidesCpnts` <a id="slidesCpnts"></a> -  accepts an array of regular React elements, the `<img></img>` element and available image source are required, we have the [default style](#textBoxStyle) for `<p>` block, override it by specifying your own with using inline-styles.
+    
+```jsx
+    let textBoxStyle = {
+        width: "50%",
+        background: "transparent",
+        textAlign: "right",
+        color: "black"
+    };
+    
+    let items = jsonData.items.map((item, index) => 
+        <div>
+            <img src = {item.imgSrc} ></img>
+            <p style = {textBoxStyle} >{item.des}</p>
+        </div>
+    );
+```
+
+All props below are optional, default setting is applied if we don't specify ours.
+
+The **Key** without prefixng a  \*  is pure css property, what be filled in column **Value** are just recommended because of the anticipated purpose, feel free to try if things are under control.
+
+* [`manner`]
+* [`buttonSetting`]
+* [`lBtnCpnt`]
+* [`rBtnCpnt`]
+* [`sliderBoxStyle`]
+* [`itemsStyle`]
+* [`textBoxStyle`]
+
+
+***
+
+[Full Documentation on Github](https://github.com/Carr1005/react-carousel-slider)
+
+
+    
+[npm-badge]: https://img.shields.io/npm/v/react-carousel-slider.png?style=flat-square
+[npm]: https://www.npmjs.org/package/react-carousel-slider

umd/react-carousel-slider.js

 /*!
- * react-carousel-slider v1.0.0
+ * react-carousel-slider v1.0.3
  * MIT Licensed
@@ -155,2 +155,3 @@ */
             margin: "0px 40px"
+            // ,minWidth: "100px" 
         };
@@ -172,4 +173,4 @@
             margin: "10px",
-            "font-size": "20px",
-            "borderRadius": "2px",
+            fontSize: "20px",
+            borderRadius: "2px",
             border: "none"
@@ -202,2 +203,3 @@ };
         _this.imgLoaded = _this.imgLoaded.bind(_this);
+        _this.nonImgLoaded = _this.nonImgLoaded.bind(_this);
         _this.slideItemHandler = _this.slideItemHandler.bind(_this);
@@ -223,3 +225,2 @@ _this.initialSlideCon = _this.initialSlideCon.bind(_this);
         _this.calculateSlidesOrder();
-
         return _this;
@@ -274,4 +275,2 @@ }
         this.slidingManner.slideOrders[2] = former.concat(latter);
-
-        console.log(this.slidingManner.slideOrders);
     };
@@ -287,2 +286,25 @@
 
+    CarouselSlider.prototype.nonImgLoaded = function nonImgLoaded(index) {
+        var refIndex = 'ref' + index;
+        if (this.refs[refIndex]) {
+            var customStyle = this.setItemsStyle();
+            var targetItem = this.refs[refIndex];
+
+            for (var key in customStyle) {
+                targetItem.style[key] = customStyle[key];
+            }
+
+            this.loadedCnt += 1;
+            this.imgsWidth[index] = targetItem.offsetWidth;
+
+            if (!this.mannerSetting.circular && index === 1 || this.mannerSetting.circular && this.slideCnt === 1) {
+                this.initialSlideCon();
+            }
+
+            if (this.mannerSetting.circular && this.loadedCnt === this.slideCnt * 3) {
+                this.initialSlideCon();
+            }
+        }
+    };
+
     CarouselSlider.prototype.imgLoaded = function imgLoaded(index) {
@@ -324,3 +346,3 @@ var refIndex = 'ref' + index;
             case 'prop':
-                var imgElement = slideEl.imgSrc ? __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('img', { src: slideEl.imgSrc }) : __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('img', null);
+                var imgElement = slideEl.imgSrc ? __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('img', { src: slideEl.imgSrc }) : __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('img', { src: slideEl.imgSrc });
                 var desElement = slideEl.des ? __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
@@ -331,5 +353,8 @@ 'p',
                 ) : null;
+
                 return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
                     'div',
-                    { className: 'itemWrapper', style: { order: index }, onLoad: function onLoad() {
+                    { className: 'itemWrapper', style: { order: index }, onError: function onError() {
+                            return _this2.nonImgLoaded(index);
+                        }, onLoad: function onLoad() {
                             return _this2.imgLoaded(index);
@@ -340,2 +365,3 @@ }, onClick: this.handleBubbling, ref: 'ref' + index, key: 'ref' + index },
                 );
+
                 break;
@@ -345,3 +371,5 @@ case 'cpnt':
                     'div',
-                    { className: 'itemWrapper', style: { order: index }, onLoad: function onLoad() {
+                    { className: 'itemWrapper', style: { order: index }, onError: function onError() {
+                            return _this2.nonImgLoaded(index);
+                        }, onLoad: function onLoad() {
                             return _this2.imgLoaded(index);
@@ -362,2 +390,3 @@ }, onClick: this.handleBubbling, ref: "ref" + index, key: "ref" + index },
         });
+
         if (this.mannerSetting.circular && this.slideCnt !== 1) {
@@ -378,2 +407,3 @@ var sum = 0;
         }
+
         slideCon.style.transform = 'translateX(-' + this.slidingManner.initialMovement + 'px)';
@@ -413,3 +443,2 @@ this.slidingManner.movement = this.slidingManner.movement + this.slidingManner.initialMovement;
     CarouselSlider.prototype.itemsReorder = function itemsReorder() {
-        console.log(this.slidingManner.cycle);
         for (var i = 0; i < this.slideCnt * 3; i++) {
@@ -422,4 +451,2 @@ if (i < this.slideCnt) {
         }
-
-        console.log(this.slidingManner.slideOrders[this.slidingManner.cycle]);
     };
@@ -551,3 +578,3 @@
         if (this.props.itemsStyle) {
-            var cloneStyle = this.props.itemsStyle;
+            var cloneStyle = JSON.parse(JSON.stringify(this.props.itemsStyle));
             delete cloneStyle.height; /* height for slideCon */
@@ -562,5 +589,5 @@ return Object.assign({}, this.defaultItemsStyle, cloneStyle);
         if (this.props.itemsStyle) {
-            return this.props.itemsStyle.height ? this.props.itemsStyle.height : this.defaultSlideConStyle.height;
+            return this.props.itemsStyle.height ? { height: this.props.itemsStyle.height } : { height: this.defaultSlideConStyle.height };
         } else {
-            return this.defaultSlideConStyle.height;
+            return { height: this.defaultSlideConStyle.height };
         }
@@ -766,7 +793,7 @@ };
                 if (this.mannerSetting.flag) {
-                    sflag = __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'flag', ref: 'sflag', style: { order: 0 } });
-                    eflag = __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'flag', ref: 'eflag', style: { order: this.slideCnt + 1 } });
+                    sflag = __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'flag', ref: 'sflag', style: { order: 0 }, key: 'sflag' });
+                    eflag = __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'flag', ref: 'eflag', style: { order: this.slideCnt + 1 }, key: 'eflag' });
                 } else {
-                    sflag = __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'flag', ref: 'sflag', style: { background: "transparent", order: 0 } });
-                    eflag = __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'flag', ref: 'eflag', style: { background: "transparent", order: this.slideCnt + 1 } });
+                    sflag = __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'flag', ref: 'sflag', style: { background: "transparent", order: 0 }, key: 'sflag' });
+                    eflag = __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'flag', ref: 'eflag', style: { background: "transparent", order: this.slideCnt + 1 }, key: 'eflag' });
                 }
@@ -784,3 +811,3 @@ items = this.slideEls.map(function (slideEl, index) {
                 { className: 'slideCon', ref: 'slideCon',
-                    style: { height: this.setSlideConHeight() },
+                    style: this.setSlideConHeight(),
                     onTouchStart: function onTouchStart(e) {
@@ -798,3 +825,3 @@ return _this6.handleTouchStart(e);
                 'div',
-                { className: 'slideCon', ref: 'slideCon', style: { height: this.setSlideConHeight() } },
+                { className: 'slideCon', ref: 'slideCon', style: this.setSlideConHeight() },
                 items
@@ -801,0 +828,0 @@ );

umd/react-carousel-slider.min.js

 /*!
- * react-carousel-slider v1.0.0
+ * react-carousel-slider v1.0.3
  * MIT Licensed
  */
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):"object"==typeof exports?exports.ReactCarouselSlider=e(require("react")):t.ReactCarouselSlider=e(t.React)}("undefined"!=typeof self?self:this,function(t){return function(t){var e={};function i(n){if(e[n])return e[n].exports;var s=e[n]={i:n,l:!1,exports:{}};return t[n].call(s.exports,s,s.exports,i),s.l=!0,s.exports}return i.m=t,i.c=e,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:n})},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=0)}([function(t,e,i){t.exports=i(1)},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=i(2),s=i.n(n),r=i(3);i.n(r);var o=function(t){function e(i){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e);var n=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}(this,t.call(this,i));return n.slidingManner={currentSlide:1,slidesTotalWidth:0,initialMovement:0,movement:0,direction:1,cycle:0,sliding:!1,slideOrders:[[],[],[]]},n.calculateSlidesOrder=n.calculateSlidesOrder.bind(n),n.itemsReorder=n.itemsReorder.bind(n),n.movementReset=n.movementReset.bind(n),n.loadedCnt=0,n.imgsWidth={},n.mannerSetting={autoSliding:!1,circular:!0,duration:"0.5s",flag:!1,button:!0},n.mannerSetting=n.handleMannerSetting(),n.defaultSliderBoxStyle={height:"400px",width:"90%",background:"#EEEEEE",border:"none"},n.defaultSlideConStyle={height:"80%"},n.defaultItemsStyle={padding:"3px",background:"#FAFAFA",margin:"0px 40px"},n.buttonManner={hoverEvent:!1},n.defaultButtonSetStyle={},n.defaultButtonIconStyle={color:"white",background:"#757575",height:"30px",width:"30px",margin:"10px","font-size":"20px",borderRadius:"2px",border:"none"},n.defaultBtnPosition={"top-left":!0,"top-right":!1,"middle-inside":!1,"middle-outside":!1,"bottom-right":!1,"bottom-left":!1,"bottom-beneath":!1},n.itemsMargin=n.props.itemsStyle&&n.props.itemsStyle.margin?parseInt(n.props.itemsStyle.margin.split(" ")[1].replace("px","")):parseInt(n.defaultItemsStyle.margin.split(" ")[1].replace("px","")),n.slideType=n.props.slideItems?"prop":n.props.slideCpnts?"cpnt":null,n.slideCnt="prop"===n.slideType?n.props.slideItems.length:"cpnt"===n.slideType?n.props.slideCpnts.length:0,n.slideEls="prop"===n.slideType?n.props.slideItems:"cpnt"===n.slideType?n.props.slideCpnts:null,n.touchEvent={touchMovement:0,touchStartX:0,prevTouchX:0,beingTouched:!1},n.imgLoaded=n.imgLoaded.bind(n),n.slideItemHandler=n.slideItemHandler.bind(n),n.initialSlideCon=n.initialSlideCon.bind(n),n.calMovement=n.calMovement.bind(n),n.autoSliding=n.autoSliding.bind(n),n.handleTouchStart=n.handleTouchStart.bind(n),n.handleTouchMove=n.handleTouchMove.bind(n),n.handleTouchEnd=n.handleTouchEnd.bind(n),n.handleButtonClick=n.handleButtonClick.bind(n),n.setSliderBoxStyles=n.setSliderBoxStyles.bind(n),n.setItemsStyle=n.setItemsStyle.bind(n),n.setSlideConHeight=n.setSlideConHeight.bind(n),n.detectButtonPosition=n.detectButtonPosition.bind(n),n.allocateButtonSet=n.allocateButtonSet.bind(n),n.setLeftButtonStyle=n.setLeftButtonStyle.bind(n),n.setHoverEvent=n.setHoverEvent.bind(n),n.calculateSlidesOrder(),n}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(e,t),e.prototype.componentWillUnmount=function(){clearInterval(this.autoSlidingTimer)},e.prototype.handleMannerSetting=function(){return this.props.manner?Object.assign({},this.mannerSetting,this.props.manner):this.mannerSetting},e.prototype.handleBubbling=function(t){t.stopPropagation()},e.prototype.calculateSlidesOrder=function(){for(var t=[],e=[],i=[],n=-1*this.slideCnt;n<=2*this.slideCnt;n++)0!==n&&t.push(n);this.slidingManner.slideOrders[0]=t;for(var s=0;s<t.length;s++)s<2*this.slideCnt?i.push(t[s]):e.push(t[s]);this.slidingManner.slideOrders[1]=e.concat(i),e=[],i=[];for(var r=0;r<t.length;r++)r<this.slideCnt?i.push(t[r]):e.push(t[r]);this.slidingManner.slideOrders[2]=e.concat(i),console.log(this.slidingManner.slideOrders)},e.prototype.mobileDetect=function(){return!!/Mobi|Tablet|iPad|iPhone/.test(navigator.userAgent)},e.prototype.imgLoaded=function(t){var e="ref"+t;if(this.refs[e]){var i=this.setItemsStyle(),n=this.refs[e];if(n.offsetWidth>=this.refs.sliderBox.offsetWidth){var s=n.offsetHeight/n.offsetWidth,r=this.refs.sliderBox.offsetWidth-2*this.itemsMargin,o=r*s;i.height=o+"px",i.width=r+"px"}for(var l in i)n.style[l]=i[l];this.loadedCnt+=1,this.imgsWidth[t]=n.offsetWidth,(!this.mannerSetting.circular&&1===t||this.mannerSetting.circular&&1===this.slideCnt)&&this.initialSlideCon(),this.mannerSetting.circular&&this.loadedCnt===3*this.slideCnt&&this.initialSlideCon()}},e.prototype.slideItemHandler=function(t,e){var i=this;switch(this.slideType){case"prop":var n=t.imgSrc?s.a.createElement("img",{src:t.imgSrc}):s.a.createElement("img",null),r=t.des?s.a.createElement("p",{style:this.setTextBoxStyle()},t.des):null;return s.a.createElement("div",{className:"itemWrapper",style:{order:e},onLoad:function(){return i.imgLoaded(e)},onClick:this.handleBubbling,ref:"ref"+e,key:"ref"+e},n,r);case"cpnt":return s.a.createElement("div",{className:"itemWrapper",style:{order:e},onLoad:function(){return i.imgLoaded(e)},onClick:this.handleBubbling,ref:"ref"+e,key:"ref"+e},t)}},e.prototype.initialSlideCon=function(){var t=this,e=this.refs.slideCon;if(e.addEventListener("transitionend",function(){t.slidingManner.sliding=!1}),this.mannerSetting.circular&&1!==this.slideCnt){for(var i=0,n=1;n<this.slideCnt+1;n++)i+=parseInt(this.imgsWidth[n]);this.slidingManner.slidesTotalWidth=i+this.slideCnt*this.itemsMargin*2,this.slidingManner.initialMovement=this.slidingManner.slidesTotalWidth-(this.refs.sliderBox.offsetWidth-(this.imgsWidth[1]+2*this.itemsMargin))/2}else this.refs.sflag.style.flexBasis=this.refs.sliderBox.offsetWidth+"px",this.refs.eflag.style.flexBasis=this.refs.sliderBox.offsetWidth+"px",e.style.transition="transform "+this.mannerSetting.duration+" ease",this.slidingManner.initialMovement=(this.refs.sliderBox.offsetWidth-this.imgsWidth[1])/2+this.itemsMargin+this.imgsWidth[1];e.style.transform="translateX(-"+this.slidingManner.initialMovement+"px)",this.slidingManner.movement=this.slidingManner.movement+this.slidingManner.initialMovement,this.autoSliding()},e.prototype.autoSliding=function(){var t=this;if(this.mannerSetting.autoSliding&&1!==this.slideCnt){var e=this.mannerSetting.autoSliding.interval.slice(0,-1),i=1e3*parseInt(e);this.mannerSetting.circular?this.autoSlidingTimer=setInterval(function(){t.slidingManner.sliding||t.moveSlide(t.slidingManner.direction)},i):this.autoSlidingTimer=setInterval(function(){t.slidingManner.currentSlide===t.slideCnt?(t.slidingManner.direction=-1,t.moveSlide(t.slidingManner.direction)):1===t.slidingManner.currentSlide?(t.slidingManner.direction=1,t.moveSlide(t.slidingManner.direction)):t.moveSlide(t.slidingManner.direction)},i)}},e.prototype.itemsReorder=function(){console.log(this.slidingManner.cycle);for(var t=0;t<3*this.slideCnt;t++)t<this.slideCnt?this.refs["ref"+(t-this.slideCnt)].style.order=this.slidingManner.slideOrders[this.slidingManner.cycle][t]:this.refs["ref"+(t-this.slideCnt+1)].style.order=this.slidingManner.slideOrders[this.slidingManner.cycle][t];console.log(this.slidingManner.slideOrders[this.slidingManner.cycle])},e.prototype.movementReset=function(t){var e=this,i=setInterval(function(){if(!e.slidingManner.sliding){var n=e.refs.slideCon;n.style.transition="none",t>0?(n.style.transform="translateX(-"+e.slidingManner.initialMovement+"px)",e.slidingManner.movement=e.slidingManner.initialMovement):t<0&&(n.style.transform="translateX(-"+(e.slidingManner.movement+e.slidingManner.slidesTotalWidth)+"px)",e.slidingManner.movement=e.slidingManner.movement+e.slidingManner.slidesTotalWidth),clearInterval(i)}},25)},e.prototype.moveSlide=function(t){var e=this.mannerSetting.circular?3*this.slideCnt:this.slideCnt;if(this.loadedCnt===e){var i=0,n=this.refs.slideCon;this.mannerSetting.circular?(this.slidingManner.sliding=!0,n.style.transition="transform "+this.mannerSetting.duration+" ease",1===t?(i=this.calMovement(t),this.slidingManner.movement=this.slidingManner.movement+i,n.style.transform="translateX(-"+this.slidingManner.movement+"px)",this.slidingManner.currentSlide=this.slidingManner.currentSlide+1,this.slidingManner.currentSlide===this.slideCnt+1&&(this.slidingManner.currentSlide=1,this.slidingManner.cycle=2===this.slidingManner.cycle?0:this.slidingManner.cycle+1,this.itemsReorder(),this.movementReset(t))):-1===t&&(i=this.calMovement(t),this.slidingManner.movement=this.slidingManner.movement-i,n.style.transform="translateX(-"+this.slidingManner.movement+"px)",this.slidingManner.currentSlide=1===this.slidingManner.currentSlide?-1:this.slidingManner.currentSlide-1,-1===this.slidingManner.currentSlide&&(this.slidingManner.currentSlide=this.slideCnt,this.slidingManner.cycle=0===this.slidingManner.cycle?2:this.slidingManner.cycle-1,this.itemsReorder(),this.movementReset(t)))):1===t&&this.slidingManner.currentSlide<this.slideCnt?(this.slidingManner.sliding=!0,i=this.calMovement(t),this.slidingManner.currentSlide=this.slidingManner.currentSlide+1,this.slidingManner.movement=this.slidingManner.movement+i,n.style.transform="translateX(-"+this.slidingManner.movement+"px)"):-1===t&&this.slidingManner.currentSlide>1&&(this.slidingManner.sliding=!0,i=this.calMovement(t),this.slidingManner.currentSlide=this.slidingManner.currentSlide-1,this.slidingManner.movement=this.slidingManner.movement-i,n.style.transform="translateX(-"+this.slidingManner.movement+"px)")}},e.prototype.calMovement=function(t){var e=1===t?1:1===this.slidingManner.currentSlide?-2:-1;return this.imgsWidth[this.slidingManner.currentSlide]/2+2*this.itemsMargin+this.imgsWidth[this.slidingManner.currentSlide+e]/2},e.prototype.handleTouchStart=function(t){this.touchEvent.touchStartX=t.targetTouches[0].clientX,this.touchEvent.beingTouched=!0},e.prototype.handleTouchMove=function(t){if(this.touchEvent.beingTouched){var e=t.targetTouches[0].clientX,i=e-this.touchEvent.touchStartX;this.touchEvent.touchMovement=i,this.touchEvent.prevTouchX=e}},e.prototype.handleTouchEnd=function(t){this.touchEvent.touchStartX!=t.changedTouches[0].clientX&&(this.slidingManner.sliding||(this.touchEvent.touchMovement>0?this.moveSlide(-1):this.moveSlide(1)),this.touchEvent.touchStartX=0,this.touchEvent.beingTouched=!0)},e.prototype.handleButtonClick=function(t){this.slidingManner.sliding||this.moveSlide(t)},e.prototype.setTextBoxStyle=function(){if(this.props.textBoxStyle)return this.props.textBoxStyle},e.prototype.setItemsStyle=function(){if(this.props.itemsStyle){var t=this.props.itemsStyle;return delete t.height,Object.assign({},this.defaultItemsStyle,t)}return this.defaultItemsStyle},e.prototype.setSlideConHeight=function(){return this.props.itemsStyle&&this.props.itemsStyle.height?this.props.itemsStyle.height:this.defaultSlideConStyle.height},e.prototype.detectButtonPosition=function(){var t=[],e=this.defaultBtnPosition;for(var i in this.props.buttonSetting&&this.props.buttonSetting.placeOn&&!1===e[this.props.buttonSetting.placeOn]&&(e[this.props.buttonSetting.placeOn]=!0),e)!0===e[i]&&(t=i.split("-"));var n=void 0;return n="left"!==t[1]&&"right"!==t[1]&&"inside"!==t[1],"middle"===t[0]?{separate:!0,outOfBox:n,vertical:t[0],horizontal:t[1]}:{separate:!1,outOfBox:n,vertical:t[0],horizontal:t[1]}},e.prototype.setRightButtonStyle=function(){var t=void 0;return t=this.defaultButtonIconStyle,this.props.buttonSetting&&this.props.buttonSetting.style&&this.props.buttonSetting.style.right&&(t=Object.assign({},this.defaultButtonIconStyle,this.props.buttonSetting.style.right)),t},e.prototype.setLeftButtonStyle=function(){var t=void 0;return t=this.defaultButtonIconStyle,this.props.buttonSetting&&this.props.buttonSetting.style&&this.props.buttonSetting.style.left&&(t=Object.assign({},this.defaultButtonIconStyle,this.props.buttonSetting.style.left)),t},e.prototype.allocateButtonSet=function(t){var e={};if(e=Object.assign({},this.defaultButtonSetStyle),!t.separate){switch(t.horizontal){case"beneath":break;case"left":e.position="absolute",e.left="0px";break;case"right":e.position="absolute",e.right="0px"}switch(t.vertical){case"top":e.position="absolute",e.top="0px";break;case"bottom":"beneath"!==t.horizontal&&(e.position="absolute",e.bottom="0px")}}return e},e.prototype.setSliderBoxStyles=function(){return this.props.sliderBoxStyle?Object.assign({},this.defaultSliderBoxStyle,this.props.sliderBoxStyle):this.defaultSliderBoxStyle},e.prototype.setHoverEvent=function(){if(this.props.buttonSetting&&(this.props.buttonSetting.hoverEvent?this.props.buttonSetting.hoverEvent:this.buttonManner.hoverEvent))return{opacity:0}},e.prototype.render=function(){var t=this,e=void 0,i=void 0,n=void 0,r=void 0,o=void 0,l=void 0,a=void 0,d=void 0,h=void 0,c=void 0,u=void 0;return this.slideCnt&&(this.mannerSetting.button&&(u=this.detectButtonPosition(),h=this.props.lBtnCpnt?this.props.lBtnCpnt:s.a.createElement("div",{className:"arrowBtn previous",style:this.setLeftButtonStyle()}),c=this.props.rBtnCpnt?this.props.rBtnCpnt:s.a.createElement("div",{className:"arrowBtn next",style:this.setRightButtonStyle()}),u.separate?(a=s.a.createElement("div",{className:"buttonWrapper left",style:this.setHoverEvent(),onClick:function(){return t.handleButtonClick(-1)}},h),d=s.a.createElement("div",{className:"buttonWrapper right",style:this.setHoverEvent(),onClick:function(){return t.handleButtonClick(1)}},c)):l=s.a.createElement("div",{className:"buttonSet",style:this.allocateButtonSet(u)},s.a.createElement("div",{className:"buttonWrapper",style:this.setHoverEvent(),onClick:function(){return t.handleButtonClick(-1)}},h),s.a.createElement("div",{className:"buttonWrapper",style:this.setHoverEvent(),onClick:function(){return t.handleButtonClick(1)}},c))),this.mannerSetting.circular&&this.slideCnt>1?i=(i=(i=this.slideEls.map(function(e,i){return t.slideItemHandler(e,i-t.slideCnt)})).concat(this.slideEls.map(function(e,i){return t.slideItemHandler(e,i+1)}))).concat(this.slideEls.map(function(e,i){return t.slideItemHandler(e,i+1+t.slideCnt)})):(this.mannerSetting.flag?(n=s.a.createElement("div",{className:"flag",ref:"sflag",style:{order:0}}),r=s.a.createElement("div",{className:"flag",ref:"eflag",style:{order:this.slideCnt+1}})):(n=s.a.createElement("div",{className:"flag",ref:"sflag",style:{background:"transparent",order:0}}),r=s.a.createElement("div",{className:"flag",ref:"eflag",style:{background:"transparent",order:this.slideCnt+1}})),(i=this.slideEls.map(function(e,i){return t.slideItemHandler(e,i+1)})).unshift(n),i.push(r)),o=this.mobileDetect()?s.a.createElement("div",{className:"slideCon",ref:"slideCon",style:{height:this.setSlideConHeight()},onTouchStart:function(e){return t.handleTouchStart(e)},onTouchMove:function(e){return t.handleTouchMove(e)},onTouchEnd:function(e){return t.handleTouchEnd(e)}},i):s.a.createElement("div",{className:"slideCon",ref:"slideCon",style:{height:this.setSlideConHeight()}},i),e=u.separate?u.outOfBox?s.a.createElement("div",{className:"sliderSet"},a,s.a.createElement("div",{className:"sliderBox",ref:"sliderBox",style:this.setSliderBoxStyles()},o),d):s.a.createElement("div",{className:"sliderBox",ref:"sliderBox",style:this.setSliderBoxStyles()},a,o,d):u.outOfBox?s.a.createElement("div",null,s.a.createElement("div",{className:"sliderBox",ref:"sliderBox",style:this.setSliderBoxStyles()},o),l):s.a.createElement("div",{className:"sliderBox",ref:"sliderBox",style:this.setSliderBoxStyles()},l,o)),e},e}(n.Component);e.default=o},function(e,i){e.exports=t},function(t,e){}]).default});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):"object"==typeof exports?exports.ReactCarouselSlider=e(require("react")):t.ReactCarouselSlider=e(t.React)}("undefined"!=typeof self?self:this,function(t){return function(t){var e={};function i(n){if(e[n])return e[n].exports;var s=e[n]={i:n,l:!1,exports:{}};return t[n].call(s.exports,s,s.exports,i),s.l=!0,s.exports}return i.m=t,i.c=e,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:n})},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=0)}([function(t,e,i){t.exports=i(1)},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=i(2),s=i.n(n),r=i(3);i.n(r);var o=function(t){function e(i){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e);var n=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}(this,t.call(this,i));return n.slidingManner={currentSlide:1,slidesTotalWidth:0,initialMovement:0,movement:0,direction:1,cycle:0,sliding:!1,slideOrders:[[],[],[]]},n.calculateSlidesOrder=n.calculateSlidesOrder.bind(n),n.itemsReorder=n.itemsReorder.bind(n),n.movementReset=n.movementReset.bind(n),n.loadedCnt=0,n.imgsWidth={},n.mannerSetting={autoSliding:!1,circular:!0,duration:"0.5s",flag:!1,button:!0},n.mannerSetting=n.handleMannerSetting(),n.defaultSliderBoxStyle={height:"400px",width:"90%",background:"#EEEEEE",border:"none"},n.defaultSlideConStyle={height:"80%"},n.defaultItemsStyle={padding:"3px",background:"#FAFAFA",margin:"0px 40px"},n.buttonManner={hoverEvent:!1},n.defaultButtonSetStyle={},n.defaultButtonIconStyle={color:"white",background:"#757575",height:"30px",width:"30px",margin:"10px",fontSize:"20px",borderRadius:"2px",border:"none"},n.defaultBtnPosition={"top-left":!0,"top-right":!1,"middle-inside":!1,"middle-outside":!1,"bottom-right":!1,"bottom-left":!1,"bottom-beneath":!1},n.itemsMargin=n.props.itemsStyle&&n.props.itemsStyle.margin?parseInt(n.props.itemsStyle.margin.split(" ")[1].replace("px","")):parseInt(n.defaultItemsStyle.margin.split(" ")[1].replace("px","")),n.slideType=n.props.slideItems?"prop":n.props.slideCpnts?"cpnt":null,n.slideCnt="prop"===n.slideType?n.props.slideItems.length:"cpnt"===n.slideType?n.props.slideCpnts.length:0,n.slideEls="prop"===n.slideType?n.props.slideItems:"cpnt"===n.slideType?n.props.slideCpnts:null,n.touchEvent={touchMovement:0,touchStartX:0,prevTouchX:0,beingTouched:!1},n.imgLoaded=n.imgLoaded.bind(n),n.nonImgLoaded=n.nonImgLoaded.bind(n),n.slideItemHandler=n.slideItemHandler.bind(n),n.initialSlideCon=n.initialSlideCon.bind(n),n.calMovement=n.calMovement.bind(n),n.autoSliding=n.autoSliding.bind(n),n.handleTouchStart=n.handleTouchStart.bind(n),n.handleTouchMove=n.handleTouchMove.bind(n),n.handleTouchEnd=n.handleTouchEnd.bind(n),n.handleButtonClick=n.handleButtonClick.bind(n),n.setSliderBoxStyles=n.setSliderBoxStyles.bind(n),n.setItemsStyle=n.setItemsStyle.bind(n),n.setSlideConHeight=n.setSlideConHeight.bind(n),n.detectButtonPosition=n.detectButtonPosition.bind(n),n.allocateButtonSet=n.allocateButtonSet.bind(n),n.setLeftButtonStyle=n.setLeftButtonStyle.bind(n),n.setHoverEvent=n.setHoverEvent.bind(n),n.calculateSlidesOrder(),n}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(e,t),e.prototype.componentWillUnmount=function(){clearInterval(this.autoSlidingTimer)},e.prototype.handleMannerSetting=function(){return this.props.manner?Object.assign({},this.mannerSetting,this.props.manner):this.mannerSetting},e.prototype.handleBubbling=function(t){t.stopPropagation()},e.prototype.calculateSlidesOrder=function(){for(var t=[],e=[],i=[],n=-1*this.slideCnt;n<=2*this.slideCnt;n++)0!==n&&t.push(n);this.slidingManner.slideOrders[0]=t;for(var s=0;s<t.length;s++)s<2*this.slideCnt?i.push(t[s]):e.push(t[s]);this.slidingManner.slideOrders[1]=e.concat(i),e=[],i=[];for(var r=0;r<t.length;r++)r<this.slideCnt?i.push(t[r]):e.push(t[r]);this.slidingManner.slideOrders[2]=e.concat(i)},e.prototype.mobileDetect=function(){return!!/Mobi|Tablet|iPad|iPhone/.test(navigator.userAgent)},e.prototype.nonImgLoaded=function(t){var e="ref"+t;if(this.refs[e]){var i=this.setItemsStyle(),n=this.refs[e];for(var s in i)n.style[s]=i[s];this.loadedCnt+=1,this.imgsWidth[t]=n.offsetWidth,(!this.mannerSetting.circular&&1===t||this.mannerSetting.circular&&1===this.slideCnt)&&this.initialSlideCon(),this.mannerSetting.circular&&this.loadedCnt===3*this.slideCnt&&this.initialSlideCon()}},e.prototype.imgLoaded=function(t){var e="ref"+t;if(this.refs[e]){var i=this.setItemsStyle(),n=this.refs[e];if(n.offsetWidth>=this.refs.sliderBox.offsetWidth){var s=n.offsetHeight/n.offsetWidth,r=this.refs.sliderBox.offsetWidth-2*this.itemsMargin,o=r*s;i.height=o+"px",i.width=r+"px"}for(var l in i)n.style[l]=i[l];this.loadedCnt+=1,this.imgsWidth[t]=n.offsetWidth,(!this.mannerSetting.circular&&1===t||this.mannerSetting.circular&&1===this.slideCnt)&&this.initialSlideCon(),this.mannerSetting.circular&&this.loadedCnt===3*this.slideCnt&&this.initialSlideCon()}},e.prototype.slideItemHandler=function(t,e){var i=this;switch(this.slideType){case"prop":var n=(t.imgSrc,s.a.createElement("img",{src:t.imgSrc})),r=t.des?s.a.createElement("p",{style:this.setTextBoxStyle()},t.des):null;return s.a.createElement("div",{className:"itemWrapper",style:{order:e},onError:function(){return i.nonImgLoaded(e)},onLoad:function(){return i.imgLoaded(e)},onClick:this.handleBubbling,ref:"ref"+e,key:"ref"+e},n,r);case"cpnt":return s.a.createElement("div",{className:"itemWrapper",style:{order:e},onError:function(){return i.nonImgLoaded(e)},onLoad:function(){return i.imgLoaded(e)},onClick:this.handleBubbling,ref:"ref"+e,key:"ref"+e},t)}},e.prototype.initialSlideCon=function(){var t=this,e=this.refs.slideCon;if(e.addEventListener("transitionend",function(){t.slidingManner.sliding=!1}),this.mannerSetting.circular&&1!==this.slideCnt){for(var i=0,n=1;n<this.slideCnt+1;n++)i+=parseInt(this.imgsWidth[n]);this.slidingManner.slidesTotalWidth=i+this.slideCnt*this.itemsMargin*2,this.slidingManner.initialMovement=this.slidingManner.slidesTotalWidth-(this.refs.sliderBox.offsetWidth-(this.imgsWidth[1]+2*this.itemsMargin))/2}else this.refs.sflag.style.flexBasis=this.refs.sliderBox.offsetWidth+"px",this.refs.eflag.style.flexBasis=this.refs.sliderBox.offsetWidth+"px",e.style.transition="transform "+this.mannerSetting.duration+" ease",this.slidingManner.initialMovement=(this.refs.sliderBox.offsetWidth-this.imgsWidth[1])/2+this.itemsMargin+this.imgsWidth[1];e.style.transform="translateX(-"+this.slidingManner.initialMovement+"px)",this.slidingManner.movement=this.slidingManner.movement+this.slidingManner.initialMovement,this.autoSliding()},e.prototype.autoSliding=function(){var t=this;if(this.mannerSetting.autoSliding&&1!==this.slideCnt){var e=this.mannerSetting.autoSliding.interval.slice(0,-1),i=1e3*parseInt(e);this.mannerSetting.circular?this.autoSlidingTimer=setInterval(function(){t.slidingManner.sliding||t.moveSlide(t.slidingManner.direction)},i):this.autoSlidingTimer=setInterval(function(){t.slidingManner.currentSlide===t.slideCnt?(t.slidingManner.direction=-1,t.moveSlide(t.slidingManner.direction)):1===t.slidingManner.currentSlide?(t.slidingManner.direction=1,t.moveSlide(t.slidingManner.direction)):t.moveSlide(t.slidingManner.direction)},i)}},e.prototype.itemsReorder=function(){for(var t=0;t<3*this.slideCnt;t++)t<this.slideCnt?this.refs["ref"+(t-this.slideCnt)].style.order=this.slidingManner.slideOrders[this.slidingManner.cycle][t]:this.refs["ref"+(t-this.slideCnt+1)].style.order=this.slidingManner.slideOrders[this.slidingManner.cycle][t]},e.prototype.movementReset=function(t){var e=this,i=setInterval(function(){if(!e.slidingManner.sliding){var n=e.refs.slideCon;n.style.transition="none",t>0?(n.style.transform="translateX(-"+e.slidingManner.initialMovement+"px)",e.slidingManner.movement=e.slidingManner.initialMovement):t<0&&(n.style.transform="translateX(-"+(e.slidingManner.movement+e.slidingManner.slidesTotalWidth)+"px)",e.slidingManner.movement=e.slidingManner.movement+e.slidingManner.slidesTotalWidth),clearInterval(i)}},25)},e.prototype.moveSlide=function(t){var e=this.mannerSetting.circular?3*this.slideCnt:this.slideCnt;if(this.loadedCnt===e){var i=0,n=this.refs.slideCon;this.mannerSetting.circular?(this.slidingManner.sliding=!0,n.style.transition="transform "+this.mannerSetting.duration+" ease",1===t?(i=this.calMovement(t),this.slidingManner.movement=this.slidingManner.movement+i,n.style.transform="translateX(-"+this.slidingManner.movement+"px)",this.slidingManner.currentSlide=this.slidingManner.currentSlide+1,this.slidingManner.currentSlide===this.slideCnt+1&&(this.slidingManner.currentSlide=1,this.slidingManner.cycle=2===this.slidingManner.cycle?0:this.slidingManner.cycle+1,this.itemsReorder(),this.movementReset(t))):-1===t&&(i=this.calMovement(t),this.slidingManner.movement=this.slidingManner.movement-i,n.style.transform="translateX(-"+this.slidingManner.movement+"px)",this.slidingManner.currentSlide=1===this.slidingManner.currentSlide?-1:this.slidingManner.currentSlide-1,-1===this.slidingManner.currentSlide&&(this.slidingManner.currentSlide=this.slideCnt,this.slidingManner.cycle=0===this.slidingManner.cycle?2:this.slidingManner.cycle-1,this.itemsReorder(),this.movementReset(t)))):1===t&&this.slidingManner.currentSlide<this.slideCnt?(this.slidingManner.sliding=!0,i=this.calMovement(t),this.slidingManner.currentSlide=this.slidingManner.currentSlide+1,this.slidingManner.movement=this.slidingManner.movement+i,n.style.transform="translateX(-"+this.slidingManner.movement+"px)"):-1===t&&this.slidingManner.currentSlide>1&&(this.slidingManner.sliding=!0,i=this.calMovement(t),this.slidingManner.currentSlide=this.slidingManner.currentSlide-1,this.slidingManner.movement=this.slidingManner.movement-i,n.style.transform="translateX(-"+this.slidingManner.movement+"px)")}},e.prototype.calMovement=function(t){var e=1===t?1:1===this.slidingManner.currentSlide?-2:-1;return this.imgsWidth[this.slidingManner.currentSlide]/2+2*this.itemsMargin+this.imgsWidth[this.slidingManner.currentSlide+e]/2},e.prototype.handleTouchStart=function(t){this.touchEvent.touchStartX=t.targetTouches[0].clientX,this.touchEvent.beingTouched=!0},e.prototype.handleTouchMove=function(t){if(this.touchEvent.beingTouched){var e=t.targetTouches[0].clientX,i=e-this.touchEvent.touchStartX;this.touchEvent.touchMovement=i,this.touchEvent.prevTouchX=e}},e.prototype.handleTouchEnd=function(t){this.touchEvent.touchStartX!=t.changedTouches[0].clientX&&(this.slidingManner.sliding||(this.touchEvent.touchMovement>0?this.moveSlide(-1):this.moveSlide(1)),this.touchEvent.touchStartX=0,this.touchEvent.beingTouched=!0)},e.prototype.handleButtonClick=function(t){this.slidingManner.sliding||this.moveSlide(t)},e.prototype.setTextBoxStyle=function(){if(this.props.textBoxStyle)return this.props.textBoxStyle},e.prototype.setItemsStyle=function(){if(this.props.itemsStyle){var t=JSON.parse(JSON.stringify(this.props.itemsStyle));return delete t.height,Object.assign({},this.defaultItemsStyle,t)}return this.defaultItemsStyle},e.prototype.setSlideConHeight=function(){return this.props.itemsStyle&&this.props.itemsStyle.height?{height:this.props.itemsStyle.height}:{height:this.defaultSlideConStyle.height}},e.prototype.detectButtonPosition=function(){var t=[],e=this.defaultBtnPosition;for(var i in this.props.buttonSetting&&this.props.buttonSetting.placeOn&&!1===e[this.props.buttonSetting.placeOn]&&(e[this.props.buttonSetting.placeOn]=!0),e)!0===e[i]&&(t=i.split("-"));var n=void 0;return n="left"!==t[1]&&"right"!==t[1]&&"inside"!==t[1],"middle"===t[0]?{separate:!0,outOfBox:n,vertical:t[0],horizontal:t[1]}:{separate:!1,outOfBox:n,vertical:t[0],horizontal:t[1]}},e.prototype.setRightButtonStyle=function(){var t=void 0;return t=this.defaultButtonIconStyle,this.props.buttonSetting&&this.props.buttonSetting.style&&this.props.buttonSetting.style.right&&(t=Object.assign({},this.defaultButtonIconStyle,this.props.buttonSetting.style.right)),t},e.prototype.setLeftButtonStyle=function(){var t=void 0;return t=this.defaultButtonIconStyle,this.props.buttonSetting&&this.props.buttonSetting.style&&this.props.buttonSetting.style.left&&(t=Object.assign({},this.defaultButtonIconStyle,this.props.buttonSetting.style.left)),t},e.prototype.allocateButtonSet=function(t){var e={};if(e=Object.assign({},this.defaultButtonSetStyle),!t.separate){switch(t.horizontal){case"beneath":break;case"left":e.position="absolute",e.left="0px";break;case"right":e.position="absolute",e.right="0px"}switch(t.vertical){case"top":e.position="absolute",e.top="0px";break;case"bottom":"beneath"!==t.horizontal&&(e.position="absolute",e.bottom="0px")}}return e},e.prototype.setSliderBoxStyles=function(){return this.props.sliderBoxStyle?Object.assign({},this.defaultSliderBoxStyle,this.props.sliderBoxStyle):this.defaultSliderBoxStyle},e.prototype.setHoverEvent=function(){if(this.props.buttonSetting&&(this.props.buttonSetting.hoverEvent?this.props.buttonSetting.hoverEvent:this.buttonManner.hoverEvent))return{opacity:0}},e.prototype.render=function(){var t=this,e=void 0,i=void 0,n=void 0,r=void 0,o=void 0,l=void 0,a=void 0,d=void 0,h=void 0,c=void 0,u=void 0;return this.slideCnt&&(this.mannerSetting.button&&(u=this.detectButtonPosition(),h=this.props.lBtnCpnt?this.props.lBtnCpnt:s.a.createElement("div",{className:"arrowBtn previous",style:this.setLeftButtonStyle()}),c=this.props.rBtnCpnt?this.props.rBtnCpnt:s.a.createElement("div",{className:"arrowBtn next",style:this.setRightButtonStyle()}),u.separate?(a=s.a.createElement("div",{className:"buttonWrapper left",style:this.setHoverEvent(),onClick:function(){return t.handleButtonClick(-1)}},h),d=s.a.createElement("div",{className:"buttonWrapper right",style:this.setHoverEvent(),onClick:function(){return t.handleButtonClick(1)}},c)):l=s.a.createElement("div",{className:"buttonSet",style:this.allocateButtonSet(u)},s.a.createElement("div",{className:"buttonWrapper",style:this.setHoverEvent(),onClick:function(){return t.handleButtonClick(-1)}},h),s.a.createElement("div",{className:"buttonWrapper",style:this.setHoverEvent(),onClick:function(){return t.handleButtonClick(1)}},c))),this.mannerSetting.circular&&this.slideCnt>1?i=(i=(i=this.slideEls.map(function(e,i){return t.slideItemHandler(e,i-t.slideCnt)})).concat(this.slideEls.map(function(e,i){return t.slideItemHandler(e,i+1)}))).concat(this.slideEls.map(function(e,i){return t.slideItemHandler(e,i+1+t.slideCnt)})):(this.mannerSetting.flag?(n=s.a.createElement("div",{className:"flag",ref:"sflag",style:{order:0},key:"sflag"}),r=s.a.createElement("div",{className:"flag",ref:"eflag",style:{order:this.slideCnt+1},key:"eflag"})):(n=s.a.createElement("div",{className:"flag",ref:"sflag",style:{background:"transparent",order:0},key:"sflag"}),r=s.a.createElement("div",{className:"flag",ref:"eflag",style:{background:"transparent",order:this.slideCnt+1},key:"eflag"})),(i=this.slideEls.map(function(e,i){return t.slideItemHandler(e,i+1)})).unshift(n),i.push(r)),o=this.mobileDetect()?s.a.createElement("div",{className:"slideCon",ref:"slideCon",style:this.setSlideConHeight(),onTouchStart:function(e){return t.handleTouchStart(e)},onTouchMove:function(e){return t.handleTouchMove(e)},onTouchEnd:function(e){return t.handleTouchEnd(e)}},i):s.a.createElement("div",{className:"slideCon",ref:"slideCon",style:this.setSlideConHeight()},i),e=u.separate?u.outOfBox?s.a.createElement("div",{className:"sliderSet"},a,s.a.createElement("div",{className:"sliderBox",ref:"sliderBox",style:this.setSliderBoxStyles()},o),d):s.a.createElement("div",{className:"sliderBox",ref:"sliderBox",style:this.setSliderBoxStyles()},a,o,d):u.outOfBox?s.a.createElement("div",null,s.a.createElement("div",{className:"sliderBox",ref:"sliderBox",style:this.setSliderBoxStyles()},o),l):s.a.createElement("div",{className:"sliderBox",ref:"sliderBox",style:this.setSliderBoxStyles()},l,o)),e},e}(n.Component);e.default=o},function(e,i){e.exports=t},function(t,e){}]).default});
 //# sourceMappingURL=react-carousel-slider.min.js.map

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

177167

increased by3.6%

Number of lines in readme file

156

increased by817.65%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of package files

11

decreased by-8.33%

Lines of code

2357

decreased by-6.47%

No dependency changes