react-responsive-carousel - npm Package Compare versions

Comparing version 3.2.15 to 3.2.16

CHANGELOG.md

@@ -10,2 +10,12 @@ # Changelog
 
+## [v3.2.15](https://github.com/leandrowd/react-responsive-carousel/compare/v3.2.14...v3.2.15) - 2021-03-18
+
+### Merged
+
+-   #525: Fix indicator click not resetting autoplay [`#561`](https://github.com/leandrowd/react-responsive-carousel/pull/561)
+
+### Commits
+
+-   Change methods to use moveTo to change slides [`acfaa1c`](https://github.com/leandrowd/react-responsive-carousel/commit/acfaa1c12dbbe879320afd5936c8a68c009feb59)
+
 ## [v3.2.14](https://github.com/leandrowd/react-responsive-carousel/compare/v3.2.13...v3.2.14) - 2021-03-15
@@ -12,0 +22,0 @@

lib/js/cssClasses.js

@@ -41,7 +41,8 @@ "use strict";
   },
-  ITEM: function ITEM(isSlider, selected) {
+  ITEM: function ITEM(isSlider, selected, previous) {
     return (0, _classnames.default)({
       thumb: !isSlider,
       slide: isSlider,
-      selected: selected
+      selected: selected,
+      previous: previous
     });
@@ -48,0 +49,0 @@ },

lib/ts/cssClasses.d.ts

@@ -6,3 +6,3 @@ declare const _default: {
     SLIDER: (isSlider: boolean, isSwiping?: boolean | undefined) => string;
-    ITEM: (isSlider: boolean, selected: boolean) => string;
+    ITEM: (isSlider: boolean, selected: boolean, previous?: boolean | undefined) => string;
     ARROW_PREV: (disabled?: boolean | undefined) => string;
@@ -9,0 +9,0 @@ ARROW_NEXT: (disabled?: boolean | undefined) => string;

package.json

 {
     "name": "react-responsive-carousel",
-    "version": "3.2.15",
+    "version": "3.2.16",
     "description": "React Responsive Carousel",
@@ -37,3 +37,3 @@ "author": {
         "update-codesandbox": "cd codesandbox/default && yarn add react-responsive-carousel@latest",
-        "format": "prettier '**/*.{js,ts,tsx,json}'",
+        "format": "prettier \"**/*.{js,ts,tsx,json}\"",
         "format:check": "yarn format --check",
@@ -40,0 +40,0 @@ "format:write": "yarn format --write",

README.md

@@ -32,2 +32,3 @@ # React Responsive Carousel
     -   Custom status
+    -   Custom animation handlers
 
@@ -181,2 +182,49 @@ ### Important links:
 
+#### Custom Animations
+
+By default, the carousel uses the traditional 'slide' style animation. There is also a built in fade animation, which can be used by passing `'fade'` to the `animationHandler` prop. \*note: the 'fade' animation does not support swiping animations, so you may want to set `swipeable` to `false`
+
+If you would like something completely custom, you can pass custom animation handler functions to `animationHandler`, `swipeAnimationHandler`, and `stopSwipingHandler`. The animation handler functions accept props and state, and return styles for the contain list, default slide style, selected slide style, and previous slide style. Take a look at the fade animation handler for an idea of how they work:
+
+```javascript
+const fadeAnimationHandler: AnimationHandler = (props, state): AnimationHandlerResponse => {
+    const transitionTime = props.transitionTime + 'ms';
+    const transitionTimingFunction = 'ease-in-out';
+
+    let slideStyle: React.CSSProperties = {
+        position: 'absolute',
+        display: 'block',
+        zIndex: -2,
+        minHeight: '100%',
+        opacity: 0,
+        top: 0,
+        right: 0,
+        left: 0,
+        bottom: 0,
+        transitionTimingFunction: transitionTimingFunction,
+        msTransitionTimingFunction: transitionTimingFunction,
+        MozTransitionTimingFunction: transitionTimingFunction,
+        WebkitTransitionTimingFunction: transitionTimingFunction,
+        OTransitionTimingFunction: transitionTimingFunction,
+    };
+
+    if (!state.swiping) {
+        slideStyle = {
+            ...slideStyle,
+            WebkitTransitionDuration: transitionTime,
+            MozTransitionDuration: transitionTime,
+            OTransitionDuration: transitionTime,
+            transitionDuration: transitionTime,
+            msTransitionDuration: transitionTime,
+        };
+    }
+
+    return {
+        slideStyle,
+        selectedStyle: { ...slideStyle, opacity: 1, position: 'relative' },
+        prevStyle: { ...slideStyle },
+    };
+};
+```
+
 ### Videos
@@ -183,0 +231,0 @@

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

341755

increased by20.18%

Number of package files

69

increased by21.05%

Lines of code

5313

increased by25.9%

Number of lines in readme file

255

increased by23.19%

No dependency changes