react-multi-carousel - npm Package Compare versions

Comparing version 1.0.17 to 1.0.18

lib/Carousel.js

@@ -15,2 +15,4 @@ "use strict";
 const utils_1 = require("./utils");
+const defaultTransitionDuration = 200;
+const defaultTransition = "all 0.2s";
 class Container extends React.Component {
@@ -135,3 +137,3 @@ constructor(props) {
                 this.setItemsToSlide();
-            }, 500);
+            }, this.props.transitionDuration || defaultTransitionDuration);
         }
@@ -187,3 +189,3 @@ }
         const { domLoaded, slidesToShow } = this.state;
-        const { deviceType, responsive, forSSR, children, slidesToSlide, customLeftArrow, customRightArrow, disableSwipeOnMobile, removeArrow, removeArrowOnDeviceType, infinite, containerClassName, contentClassName, itemClassName, transition } = this.props;
+        const { deviceType, responsive, forSSR, children, slidesToSlide, customLeftArrow, customRightArrow, disableSwipeOnMobile, removeArrow, removeArrowOnDeviceType, infinite, containerClassName, contentClassName, itemClassName, customTransition } = this.props;
         let itemWidth;
@@ -236,8 +238,8 @@ if (forSSR && deviceType && !domLoaded && !slidesToShow) {
         return (React.createElement("div", { className: containerClassName, style: style_1.containerStyle },
-            shouldShowArrows && !disableLeftArrow && React.createElement(LeftArrow, null),
             React.createElement("div", { className: contentClassName, style: style_1.contentStyle }, React.Children.toArray(children).map((child, index) => (React.createElement("div", { key: index, ref: this.itemRef, onMouseMove: this.handleMouseMove, onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onTouchStart: this.handleTouchStart, onTouchMove: this.handleTouchMove, onTouchEnd: this.handleTouchEnd, style: {
-                    transition: transition || "all 0.2s",
+                    transition: customTransition || defaultTransition,
                     flex: `1 0 ${itemWidth}%`,
                     transform: this.state.transform
                 }, className: itemClassName }, child)))),
+            shouldShowArrows && !disableLeftArrow && React.createElement(LeftArrow, null),
             shouldShowArrows && !disableRightArrow && React.createElement(RightArrow, null)));
@@ -244,0 +246,0 @@ }

lib/types.d.ts

@@ -27,3 +27,4 @@ /// <reference types="react" />
     containerClassName?: string;
-    transition?: string;
+    customTransition?: string;
+    transitionDuration?: number;
 }
@@ -30,0 +31,0 @@ interface CarouselInternalState {

package.json

 {
   "name": "react-multi-carousel",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "description": "",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -67,2 +67,10 @@ # react-multi-carousel
 
+## Custom Arrows.
+You can pass your own custom arrows to make it the way you want, the same for the position. For example, add media query for the arrows to go under when on smaller screens.
+
+```
+const CustomRightArrow = ({ onClick }) => <button onClick={() => onClick()} />
+<Carousel customRightArrow={<CustomRightArrow />} />
+```
+
 ## General Props
@@ -73,4 +81,4 @@ ```
 forSSR?: boolean;
-slidesToSlide?: number; // number of slides on each slide.
-disableDrag?: boolean; // for desktop
+slidesToSlide: number;
+disableDrag?: boolean;
 removeArrow?: boolean;
@@ -86,3 +94,7 @@ disableSwipeOnMobile?: boolean;
 containerClassName?: string;
-transition?:string;
+customTransition?:string;
+transitionDuration?: number;
+// if you are using customTransition, make sure to put the duration here.
+// for example, customTransition="all .5"  then put transitionDuration as 500.
+// this is needed for the resizing to work.
 ```
@@ -89,0 +101,0 @@

No alert changes

Improved metrics

Total package byte prevSize

30505

2.73%

Lines of code

417

0.72%

Number of lines in readme file

107

12.63%

No dependency changes