Merge pull request #59 from vadymshymko/add-autoplay-delay

Add prop. Optimize build size. Update version
vadymshymko · Sep 12, 2022 · 89b875a · 89b875a
2 parents f46c7cc + 109bf41
commit 89b875a
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 26 deletions.
diff --git a/README.md b/README.md
@@ -162,6 +162,7 @@ export default ReactSimplyCarouselExample;
 | **persistentChangeCallbacks**                                     | boolean                              | `false`                       | Enable call `onRequestChange` prop even if activeSlideIndex equals new value                                                                                                                                                                                                                                        |
 | **showSlidesBeforeInit** (deprecated)                             | boolean                              | `true`                        | Show slides on very first (initial) carousel render                                                                                                                                                                                                                                                                 |
 | **visibleSlideProps**                                             | object                               | `{}`                          | DOM props for visible slide element                                                                                                                                                                                                                                                                                 |
+| **autoplayDelay**                                                 | number                               | `0`                           | after what period of time the auto-update function of the active slide will be launched                                                                                                                                                                                                                             |
 
 ## Demo
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-simply-carousel",
-  "version": "8.3.5",
+  "version": "8.4.0",
   "description": "A simple, lightweight, fully controlled isomorphic (with SSR support) React.js carousel component. Touch enabled and responsive. With support for autoplay and infinity options. Fully customizable",
   "files": [
     "dist/"

diff --git a/src/index.tsx b/src/index.tsx
@@ -70,6 +70,7 @@ type ReactSimplyCarouselStaticProps = {
   dotsNav?: DotsNav;
   persistentChangeCallbacks?: boolean;
   showSlidesBeforeInit?: boolean;
+  autoplayDelay?: number;
 };
 
 type ReactSimplyCarouselResponsiveProps = (Omit<
@@ -176,6 +177,7 @@ function ReactSimplyCarousel({
     disableNavIfEdgeActive = true,
     dotsNav = {},
     persistentChangeCallbacks = false,
+    autoplayDelay = 0,
     // showSlidesBeforeInit = true,
   } = windowWidth
     ? {
@@ -221,15 +223,18 @@ function ReactSimplyCarousel({
       prevCorrectionSlideIndex: number;
       curActiveSlideIndex: number;
     }) => {
+      const itemsListWidth = itemsListRef.current!.offsetWidth;
+      const itemsListChildren = itemsListRef.current!.children;
+      const itemsListChildrenCount = itemsListChildren.length;
+
       const slidesHTMLElements = infinite
-        ? ([...itemsListRef.current!.children].slice(
-            itemsListRef.current!.children.length / 3 -
-              prevCorrectionSlideIndex,
-            itemsListRef.current!.children.length / 3 -
+        ? ([...itemsListChildren].slice(
+            itemsListChildrenCount / 3 - prevCorrectionSlideIndex,
+            itemsListChildrenCount / 3 -
               prevCorrectionSlideIndex +
-              itemsListRef.current!.children.length / 3
+              itemsListChildrenCount / 3
           ) as HTMLElement[])
-        : ([...itemsListRef.current!.children] as HTMLElement[]);
+        : ([...itemsListChildren] as HTMLElement[]);
 
       const activeSlideWidth =
         slidesHTMLElements[curActiveSlideIndex].offsetWidth;
@@ -253,15 +258,12 @@ function ReactSimplyCarousel({
           }, 0)
         : innerRef.current!.offsetWidth;
 
-      const itemsListMaxTranslateX =
-        itemsListRef.current!.offsetWidth - innerMaxWidth;
+      const itemsListMaxTranslateX = itemsListWidth - innerMaxWidth;
 
       const offsetCorrectionForCenterMode =
         centerMode && infinite ? -(innerMaxWidth - activeSlideWidth) / 2 : 0;
 
-      const offsetCorrectionForInfiniteMode = infinite
-        ? itemsListRef.current!.offsetWidth / 3
-        : 0;
+      const offsetCorrectionForInfiniteMode = infinite ? itemsListWidth / 3 : 0;
 
       const offsetCorrectionForEdgeSlides =
         // eslint-disable-next-line no-nested-ternary
@@ -318,7 +320,7 @@ function ReactSimplyCarousel({
       const start = infinite
         ? offsetCorrectionForInfiniteMode + offsetCorrectionForCenterMode
         : Math.min(
-            itemsListRef.current!.offsetWidth - innerMaxWidth,
+            itemsListMaxTranslateX,
             slidesHTMLElements.reduce((res, item, index) => {
               if (index < curActiveSlideIndex) {
                 return res + item.offsetWidth;
@@ -329,6 +331,13 @@ function ReactSimplyCarousel({
           );
       const end = start + innerMaxWidth;
 
+      const slidesHTMLElementsDefault = slidesHTMLElements.map(
+        (htmlElement, index) => ({
+          slideIndex: index,
+          htmlElement,
+        })
+      );
+
       const slidesHTMLElementsInRender = infinite
         ? [
             ...slidesHTMLElements
@@ -337,25 +346,16 @@ function ReactSimplyCarousel({
                 slideIndex: index + curActiveSlideIndex,
                 htmlElement,
               })),
-            ...slidesHTMLElements.map((htmlElement, index) => ({
-              slideIndex: index,
-              htmlElement,
-            })),
-            ...slidesHTMLElements.map((htmlElement, index) => ({
-              slideIndex: index,
-              htmlElement,
-            })),
+            ...slidesHTMLElementsDefault,
+            ...slidesHTMLElementsDefault,
             ...slidesHTMLElements
               .slice(0, curActiveSlideIndex)
               .map((htmlElement, index) => ({
                 slideIndex: index,
                 htmlElement,
               })),
           ]
-        : slidesHTMLElements.map((htmlElement, index) => ({
-            slideIndex: index,
-            htmlElement,
-          }));
+        : slidesHTMLElementsDefault;
 
       const visibilityItemsState = slidesHTMLElementsInRender.reduce(
         (result, { slideIndex, htmlElement }) => {
@@ -521,11 +521,12 @@ function ReactSimplyCarousel({
           getNextSlideIndex(autoplayDirection),
           autoplayDirection
         );
-      }, delay);
+      }, autoplayDelay || delay);
     }
   }, [
     autoplay,
     autoplayDirection,
+    autoplayDelay,
     updateActiveSlideIndex,
     getNextSlideIndex,
     delay,