react-slideshow-image - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

lib/components/slideshow/fade.js

@@ -59,5 +59,7 @@ 'use strict';
 
-      this.timeout = setTimeout(function () {
-        return _this2.fadeImages(1);
-      }, this.props.duration);
+      if (this.props.autoplay) {
+        this.timeout = setTimeout(function () {
+          return _this2.fadeImages(1);
+        }, this.props.duration);
+      }
       this.setState({
@@ -155,3 +157,3 @@ children: this.props.children
                   {
-                    style: { opacity: key === index ? '1' : '0' },
+                    style: { opacity: key === index ? '1' : '0', zIndex: key === index ? '1' : '0' },
                     'data-index': key,
@@ -223,5 +225,7 @@ key: key
         });
-        _this4.timeout = setTimeout(function () {
-          _this4.fadeImages((newIndex + 1) % children.length);
-        }, _this4.props.duration);
+        if (_this4.props.autoplay) {
+          _this4.timeout = setTimeout(function () {
+            _this4.fadeImages((newIndex + 1) % children.length);
+          }, _this4.props.duration);
+        }
       });
@@ -238,3 +242,4 @@ }
   indicators: false,
-  arrows: true
+  arrows: true,
+  autoplay: true
 };
@@ -246,4 +251,5 @@
   indicators: _propTypes2.default.bool,
-  arrows: _propTypes2.default.bool
+  arrows: _propTypes2.default.bool,
+  autoplay: _propTypes2.default.bool
 };
 exports.default = Fade;

lib/components/slideshow/slide.js

@@ -113,3 +113,9 @@ 'use strict';
       var index = this.state.index;
+      var _props = this.props,
+          infinite = _props.infinite,
+          children = _props.children;
 
+      if (!infinite && type === 'next' && index === children.length - 1) {
+        return;
+      }
       index = type === 'next' ? index + 1 : index - 1;
@@ -123,8 +129,9 @@ this.slideImages(index);
 
-      var _props = this.props,
-          children = _props.children,
-          duration = _props.duration,
-          infinite = _props.infinite,
-          indicators = _props.indicators,
-          arrows = _props.arrows;
+      var _props2 = this.props,
+          children = _props2.children,
+          duration = _props2.duration,
+          infinite = _props2.infinite,
+          autoplay = _props2.autoplay,
+          indicators = _props2.indicators,
+          arrows = _props2.arrows;
       var index = this.state.index;
@@ -135,3 +142,3 @@
       };
-      if (infinite) {
+      if (autoplay) {
         this.timeout = setTimeout(function () {
@@ -214,5 +221,5 @@ return _this3.preSlide('next');
 
-      var _props2 = this.props,
-          children = _props2.children,
-          transitionDuration = _props2.transitionDuration;
+      var _props3 = this.props,
+          children = _props3.children,
+          transitionDuration = _props3.transitionDuration;
 
@@ -256,3 +263,4 @@ var existingTweens = TWEEN.default.getAll();
   transitionDuration: 1000,
-  infinite: false,
+  infinite: true,
+  autoplay: true,
   indicators: false,
@@ -267,4 +275,5 @@ arrows: true
   indicators: _propTypes2.default.bool,
+  autoplay: _propTypes2.default.bool,
   arrows: _propTypes2.default.bool
 };
 exports.default = Slideshow;

lib/components/slideshow/zoom.js

@@ -59,5 +59,7 @@ 'use strict';
 
-      this.timeout = setTimeout(function () {
-        return _this2.zoomTo(1);
-      }, this.props.duration);
+      if (this.props.autoplay) {
+        this.timeout = setTimeout(function () {
+          return _this2.zoomTo(1);
+        }, this.props.duration);
+      }
       this.setState({
@@ -155,3 +157,3 @@ children: this.props.children
                   {
-                    style: { opacity: key === index ? '1' : '0' },
+                    style: { opacity: key === index ? '1' : '0', zIndex: key === index ? '1' : '0' },
                     'data-index': key,
@@ -196,3 +198,5 @@ key: key
           index = _state2.index;
-      var scale = this.props.scale;
+      var _props2 = this.props,
+          scale = _props2.scale,
+          autoplay = _props2.autoplay;
 
@@ -231,5 +235,7 @@ clearTimeout(this.timeout);
         });
-        _this4.timeout = setTimeout(function () {
-          _this4.zoomTo((newIndex + 1) % children.length);
-        }, _this4.props.duration);
+        if (autoplay) {
+          _this4.timeout = setTimeout(function () {
+            _this4.zoomTo((newIndex + 1) % children.length);
+          }, _this4.props.duration);
+        }
       });
@@ -246,3 +252,4 @@ }
   indicators: false,
-  arrows: true
+  arrows: true,
+  autoplay: true
 };
@@ -255,4 +262,5 @@
   scale: _propTypes2.default.number.isRequired,
-  arrows: _propTypes2.default.bool
+  arrows: _propTypes2.default.bool,
+  autoplay: _propTypes2.default.bool
 };
 exports.default = Zoom;

package.json

 {
   "name": "react-slideshow-image",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "author": "Femi Oladeji",
@@ -5,0 +5,0 @@ "description": "An image slideshow with react",

README.md

@@ -163,5 +163,6 @@ # React-Slideshow
 | transitionDuration  | integer     | 1000          | Determines how long the transition takes                                                   |
-| infinite            | boolean     | false         | Specifies if the transition should loop throughout                                         |
+| infinite            | boolean     | true          | Specifies if the transition should loop throughout (only applicable to slide for now)      |
 | indicators          | boolean     | false         | For specifying if there should be dots below the slideshow                                 |
 | scale               | number      |               | *Required* when using zoom to specify the scale the current slide should be zoomed to      |
-| arrows              | boolean     | true          | Determines if there should be a navigational arrow for going to the next or previous slide |
+| arrows              | boolean     | true          | Determines if there should be a navigational arrow for going to the next or previous slide |
+| autoplay            | boolean     | true          | Responsible for determining if the slideshow should start automatically                    |

No alert changes

Improved metrics

Total package byte prevSize

3723666

increased by0.02%

Lines of code

4567

increased by0.51%

Number of lines in readme file

167

increased by0.6%

No dependency changes