Add props for dots nav wrapper

vadymshymko · Sep 1, 2021 · 58549f5 · 58549f5
1 parent dfd9d17
commit 58549f5
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -100,6 +100,7 @@ class App extends Component {
 | **disableNavIfEdgeVisible** (disabled if `infinite` prop enabled) | boolean                              | `true`                        | Disable carousel forward nav if last slide is visible / Disable carousel backward nav if first slide is visible                                                                                                                                                       |
 | **disableNavIfEdgeActive**                                        | boolean                              | `true`                        | Disable carousel forward nav if activeSlideIndex === lastSlideIndex / Disable carousel backward nav if activeSlideIndex === 0                                                                                                                                         |
 | **dotsNav (experimental)** (disabled if `infinite` prop enabled)  | object                               | `{}`                          | Props for carousel dots. includes `show` (boolean) for toggle dots nav visibility, activeClassName (className for active dot) and DOM props for all dots nav buttons                                                                                                  |
+| **dotsNavWrapperProps**                                           | object                               | `{}`                          | DOM Props for dots nav wrapper div                                                                                                                                                                                                                                    |
 
 ## Demo
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-simply-carousel",
-  "version": "5.1.0",
+  "version": "5.1.1",
   "description": "Simple react.js carousel component",
   "main": "dist/index.js",
   "files": [

diff --git a/src/index.jsx b/src/index.jsx
@@ -93,6 +93,7 @@ function ReactSimplyCarousel({ responsiveProps, ...props }) {
     disableNavIfEdgeVisible,
     disableNavIfEdgeActive,
     dotsNav,
+    dotsNavWrapperProps,
   } = windowWidth
     ? {
         ...propsByWindowWidth,
@@ -741,35 +742,38 @@ function ReactSimplyCarousel({ responsiveProps, ...props }) {
         </button>
       )}
 
-      {!infinite &&
-        !!showDotsNav &&
-        Array.from({
-          length: Math.ceil(slidesItems.length / itemsToScroll),
-        }).map((_item, index) => (
-          <button
-            type="button"
-            // eslint-disable-next-line react/no-array-index-key
-            key={index}
-            title={index}
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...dotsBtnProps}
-            className={`${dotsBtnProps.className || ""} ${
-              index ===
-              Math.ceil((activeSlideIndex - itemsToScroll) / itemsToScroll)
-                ? activeDotClassName
-                : ""
-            }`}
-            onClick={() => {
-              updateActiveSlideIndex(
-                Math.min(index * itemsToScroll, slidesItems.length - 1),
-                Math.min(index * itemsToScroll, slidesItems.length - 1) >
-                  activeSlideIndex
-                  ? "forward"
-                  : "backward"
-              );
-            }}
-          />
-        ))}
+      {!infinite && !!showDotsNav && (
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        <div {...dotsNavWrapperProps}>
+          {Array.from({
+            length: Math.ceil(slidesItems.length / itemsToScroll),
+          }).map((_item, index) => (
+            <button
+              type="button"
+              // eslint-disable-next-line react/no-array-index-key
+              key={index}
+              title={index}
+              // eslint-disable-next-line react/jsx-props-no-spreading
+              {...dotsBtnProps}
+              className={`${dotsBtnProps.className || ""} ${
+                index ===
+                Math.ceil((activeSlideIndex - itemsToScroll) / itemsToScroll)
+                  ? activeDotClassName
+                  : ""
+              }`}
+              onClick={() => {
+                updateActiveSlideIndex(
+                  Math.min(index * itemsToScroll, slidesItems.length - 1),
+                  Math.min(index * itemsToScroll, slidesItems.length - 1) >
+                    activeSlideIndex
+                    ? "forward"
+                    : "backward"
+                );
+              }}
+            />
+          ))}
+        </div>
+      )}
     </div>
   );
 }
@@ -801,6 +805,7 @@ ReactSimplyCarousel.propTypes = {
   disableNavIfEdgeVisible: PropTypes.bool,
   disableNavIfEdgeActive: PropTypes.bool,
   dotsNav: PropTypes.objectOf(PropTypes.any),
+  dotsNavWrapperProps: PropTypes.objectOf(PropTypes.any),
 };
 
 ReactSimplyCarousel.defaultProps = {
@@ -828,6 +833,7 @@ ReactSimplyCarousel.defaultProps = {
   disableNavIfEdgeVisible: true,
   disableNavIfEdgeActive: true,
   dotsNav: {},
+  dotsNavWrapperProps: {},
 };
 
 export default memo(ReactSimplyCarousel);