react-carousel - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

Carousel.js

@@ -7,2 +7,3 @@ var React = require('react/addons')
 var MIN_MOVEMENT = 100
+var MAX_TRANSITION_TIME = 350
 
@@ -12,3 +13,5 @@ var Carousel = React.createClass({
     return {
+      prevIndex: 0,
       currentIndex: 0,
+      itemWidths: Array(this.props.children.length),
       itemStart: Array(this.props.children.length),
@@ -35,2 +38,3 @@ containerWidth: 0,
     this.setState({
+      itemWidths: widths,
       itemStart: startPos,
@@ -47,9 +51,12 @@ containerWidth: totalWidth
     var index = this.state.currentIndex
-    if (x > 0) {
+    var imageMoveIndex = this.state.currentIndex
+    if (x < 0) {
       if (index > 0) {
         index = index - 1
+        imageMoveIndex = index
       }
-    } else if (x < 0) {
+    } else if (x > 0) {
       if (index < this.props.children.length - 1) {
         index = index + 1
+        imageMoveIndex = imageMoveIndex
       }
@@ -59,2 +66,3 @@ }
     this.setState({
+      prevIndex: imageMoveIndex,
       currentIndex: index,
@@ -70,3 +78,6 @@ delta: 0
   maybeMoveImage: function (e, x) {
-    if (x > MIN_MOVEMENT) {
+    if (Math.abs(x) < MIN_MOVEMENT) {
+      this.setState({
+        delta: 0
+      })
       return
@@ -98,2 +109,8 @@ }
 
+    var transitionTime = Math.min(
+      this.state.itemWidths[this.state.prevIndex] / 2,
+      MAX_TRANSITION_TIME
+    )
+    var transition = 'all ' + transitionTime + 'ms ease-out'
+
     return React.DOM.div(
@@ -106,6 +123,7 @@ { className: 'carousel' },
         onSwiped: this.maybeMoveImage,
-        className: cxContainer,
+        className: 'carousel-container',
         ref: 'carouselContainer',
         style: {
           '-webkit-transform': 'translateX(' + delta + 'px)',
+          transition: this.state.delta === 0 ? transition : 'none',
           width: this.state.containerWidth + 'px'
@@ -112,0 +130,0 @@ }

package.json

 {
   "name": "react-carousel",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A carousel written in react",
@@ -16,3 +16,3 @@ "main": "Carousel.js",
     "react": "^0.11.2",
-    "react-swipeable": "^1.1.1"
+    "react-swipeable": "^1.1.3"
   },
@@ -19,0 +19,0 @@ "author": "Josh Perez <[e-mail]>",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

5922

increased by10.12%

Lines of code

130

increased by12.07%

Dependency changes

• Updatedreact-swipeable@^1.1.3