react-multi-carousel - npm Package Compare versions

Comparing version 1.3.2 to 1.3.3

lib/CarouselItems.js

@@ -19,6 +19,3 @@ "use strict";
                     : "auto"
-            }, className: "react-multi-carousel-item " + itemClass }, React.cloneElement(child, {
-            isvisible: utils_1.getIfSlideIsVisbile(index, state),
-            active: currentSlide === index
-        }))); });
+            }, className: "react-multi-carousel-item " + itemClass }, child)); });
     }
@@ -33,8 +30,5 @@ return React.Children.toArray(children).map(function (child, index) { return (React.createElement("li", { key: index, "data-index": index, "aria-hidden": utils_1.getIfSlideIsVisbile(index, state) ? "false" : "true", style: {
                 : "auto"
-        }, className: "react-multi-carousel-item " + itemClass }, React.cloneElement(child, {
-        isvisible: utils_1.getIfSlideIsVisbile(index, state),
-        active: currentSlide === index
-    }))); });
+        }, className: "react-multi-carousel-item " + itemClass }, child)); });
 };
 exports.default = CarouselItems;
 //# sourceMappingURL=CarouselItems.js.map

lib/utils/clones.d.ts

@@ -7,3 +7,3 @@ import { CarouselInternalState, CarouselProps } from "../types";
 }, childrenArr: any[]): number;
-declare function getCloneCounterPart(index: number, { slidesToShow, totalItems }: {
+declare function getCloneCounterPart(index: number, { slidesToShow, totalItems, currentSlide }: {
     slidesToShow: number;
@@ -10,0 +10,0 @@ currentSlide: number;

lib/utils/clones.js

@@ -36,8 +36,18 @@ "use strict";
 function getCloneCounterPart(index, _a, childrenArr) {
-    var slidesToShow = _a.slidesToShow, totalItems = _a.totalItems;
+    var slidesToShow = _a.slidesToShow, totalItems = _a.totalItems, currentSlide = _a.currentSlide;
     if (childrenArr.length > slidesToShow * 2) {
+        if (index === 0) {
+            // 0 is a special case
+            return childrenArr.length + slidesToShow * 2;
+        }
         var cloneCouterPart = index - (childrenArr.length - slidesToShow * 2);
         return cloneCouterPart;
     }
-    return undefined;
+    else {
+        if (index === 0) {
+            // 0 is a special case
+            return childrenArr.length + slidesToShow * 2 - 1;
+        }
+        return undefined;
+    }
 }
@@ -44,0 +54,0 @@ exports.getCloneCounterPart = getCloneCounterPart;

package.json

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

README.md

@@ -118,31 +118,2 @@ # react-multi-carousel
 
-## Children
-
-A list of children you pass to the carousel will receive 'active' and 'isvisibile' props.
-This is very useful if you want to scale out the item if its active, or your carousel items are videos, and you want them to auto play when its visible on the screen.
-
-```js
-const CarouselItem = ({ active, isvisibile }) => {
-  return <img style={{ transform: active ? 'scale(1.2)' : 'none' }}></img>
-}
-class Video extends React.Component {
-  componentDidUpdate({ isvisibile }) {
-    if(!isvisibile && this.props.isvisibile) {
-      this.video.current.play();
-    }
-  }
-  render() {
-    return <video ref={node => this.video = node} autoplay={false} />
-  }
-}
-// your carousel component
-return (
-  <Carousel>
-    <CarouselItem />
-    <CarouselItem />
-    <Video />
-  <Carousel>
-)
-```
-
 ## Custom Arrows.
@@ -149,0 +120,0 @@

No alert changes

Improved metrics

Lines of code

1868

0.32%

Worsened metrics

Total package byte prevSize

159400

-0.43%

Number of lines in readme file

353

-7.59%

No dependency changes