Merge pull request #48 from vadymshymko/feature/add-initial-slides-vi…

…sibility-prop Feature/add initial slides visibility prop
vadymshymko · Jun 9, 2022 · 79d9915 · 79d9915
2 parents 59199c0 + 04ccdd2
commit 79d9915
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -160,6 +160,7 @@ export default ReactSimplyCarouselExample;
 | **disableNavIfEdgeActive**                                        | boolean                              | `true`                        | Disable carousel forward nav if activeSlideIndex === lastSlideIndex / Disable carousel backward nav if activeSlideIndex === 0                                                                                                                                                            |
 | **dotsNav** (experimental)                                        | object                               | `{}`                          | Props for carousel dots. Includes `show` (boolean) property for toggle dots nav visibility, `containerProps` (DOM Props for dots nav wrapper div) property, `itemBtnProps` (DOM props for all dots nav buttons) property and `activeItemBtnProps` (DOM props for active dots nav button) |
 | **persistentChangeCallbacks**                                     | boolean                              | `false`                       | Enable call `onRequestChange` prop even if activeSlideIndex equals new value                                                                                                                                                                                                             |
+| **showSlidesBeforeInit**                                          | boolean                              | `false`                       | Show slides on very first (initial) carousel render                                                                                                                                                                                                                                      |
 
 ## Demo
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-simply-carousel",
-  "version": "8.1.0",
+  "version": "8.2.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
@@ -56,6 +56,7 @@ type ReactSimplyCarouselStaticProps = {
   disableNavIfEdgeActive?: boolean;
   dotsNav?: DotsNav;
   persistentChangeCallbacks?: boolean;
+  showSlidesBeforeInit?: boolean;
 };
 
 type ReactSimplyCarouselResponsiveProps = (Omit<
@@ -156,6 +157,7 @@ function ReactSimplyCarousel({
     disableNavIfEdgeActive = true,
     dotsNav = {},
     persistentChangeCallbacks = false,
+    showSlidesBeforeInit = false,
   } = windowWidth
     ? {
         ...propsByWindowWidth,
@@ -782,7 +784,13 @@ function ReactSimplyCarousel({
           flexFlow: 'row wrap',
           padding: '0',
           overflow: 'hidden',
-          maxWidth: innerMaxWidth ? `${innerMaxWidth}px` : 0,
+          // eslint-disable-next-line no-nested-ternary
+          maxWidth: innerMaxWidth
+            ? `${innerMaxWidth}px`
+            : !innerMaxWidth && showSlidesBeforeInit
+            ? undefined
+            : 0,
+          flex: !innerMaxWidth && showSlidesBeforeInit ? `1 0` : undefined,
         }}
         ref={innerRef}
       >