Initial.

Author: jsanthosh-godaddy

.storybook/webpack.config.js

@@ -8,6 +8,20 @@ module.exports = {
             use: ['style-loader', 'css-loader', 'less-loader'],
             include: path.resolve(__dirname, '../'),
         },
+        {
+            test: /\.svg$/,
+            use: [
+                {
+                    loader: "babel-loader"
+                },
+                {
+                    loader: "react-svg-loader",
+                    options: {
+                        jsx: true // true outputs JSX tags
+                    }
+                }
+            ]
+        }
         ],
     },
 };

README.md

@@ -224,6 +224,59 @@ Optional array of controls to be rendered in the carousel container. Each contro
 component constructor, and will be passed callback props `nextSlide`, `prevSlide` and `goToSlide` for controlling
 navigation, and `numSlides`, `selectedIndex` and `infinite` for rendering the state of the carousel.
 
+#### isVertical
+```
+PropTypes.bool
+```
+
+Defaults to `false`. Setting `isVertical` to `true` will render vertical carousal.
+
+#### verticalArrowPadding
+```
+PropTypes.number
+```
+
+Defaults to `0`. This prop can used to customize the positioning of vertical arrows in case of a vertical carousal. 
+
+#### upArrowImage
+```
+PropTypes.node
+```
+
+This prop can used to pass a custom `.svg` image to replace the default up arrow.
+
+#### downArrowImage
+```
+PropTypes.node
+```
+
+This prop can used to pass a custom `.svg` image to replace the default down arrow.
+
+#### leftArrowImage
+```
+PropTypes.node
+```
+
+This prop can used to pass a custom `.svg` image to replace the default left arrow.
+
+#### rightArrowImage
+```
+PropTypes.node
+```
+
+This prop can used to pass a custom `.svg` image to replace the default right arrow.
+
+```
+// Example for custom svg image :
+import UpImage from '../../test/images/test-up-arrow.svg';
+import DownImage from '../../test/images/test-down-arrow.svg';
+
+<Carousel height='450px' width='450px' cellPadding={ 5 } infinite={ false } arrows={ true }
+  dots={ false } isVertical={ true } upArrowImage={<UpImage/>} downArrowImage={<DownImage/>} >
+  { imgElements }
+</Carousel>;
+```
+
 Tests:
 ----------------
 

package-lock.json

@@ -69,6 +69,7 @@
     "postcss-cli": "^8.3.0",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
+    "react-svg-loader": "^3.0.3",
     "rimraf": "^3.0.2",
     "setup-env": "^1.2.3",
     "sinon": "^9.2.0",

package.json

@@ -17,17 +17,13 @@
   }
 
   .carousel-arrow-default {
-    border: 3px solid !important;
-    border-radius: 50%;
-    color: rgba(255, 255, 255, 0.9);
     height: 32px;
     width: 32px;
     font-weight: 900;
-    background: rgba(0, 0, 0, 0.15);
+    background: none;
   }
 
   .carousel-arrow {
-    position: absolute;
     z-index: 1;
     bottom: 23px;
     padding: 0;
@@ -40,7 +36,6 @@
 
     &:before {
       font-size: 19px;
-      display: block;
       margin-top: -2px;
     }
 
@@ -52,28 +47,12 @@
 
   .carousel-left-arrow {
     left: 23px;
+    padding-top: 10px;
   }
 
   .carousel-right-arrow {
     right: 23px;
-  }
-
-  .carousel-left-arrow {
-    &.carousel-arrow-default {
-      &:before {
-        content: '<';
-        padding-right: 2px;
-      }
-    }
-  }
-
-  .carousel-right-arrow {
-    &.carousel-arrow-default {
-      &:before {
-        content: '>';
-        padding-left: 2px;
-      }
-    }
+    padding-top: 10px;
   }
 
   .carousel-track {
@@ -88,7 +67,6 @@
       transition: opacity 0.5s ease-in-out;
 
       & > * {
-        display: block;
         white-space: normal;
       }
       &.carousel-slide-loading {

src/carousel.less

@@ -1,5 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import DefaultUpArrow from '../images/arrow-up.svg';
+import DefaultDownArrow from '../images/arrow-down.svg';
+import DefaultLeftArrow from '../images/arrow-left.svg';
+import DefaultRightArrow from '../images/arrow-right.svg';
 
 /**
  * Renders an arrow component used to transition from right-to-left or left-to-right through the carousel slides.
@@ -13,15 +17,19 @@ export default class Arrow extends Component {
       infinite: PropTypes.bool.isRequired,
       prevSlide: PropTypes.func.isRequired,
       nextSlide: PropTypes.func.isRequired,
-      direction: PropTypes.oneOf(['left', 'right']).isRequired,
+      direction: PropTypes.oneOf(['left', 'right', 'top', 'bottom']).isRequired,
       arrows: PropTypes.oneOfType([
         PropTypes.bool,
         PropTypes.shape({
           left: PropTypes.node.isRequired,
           right: PropTypes.node.isRequired,
           className: PropTypes.string
         })
-      ])
+      ]),
+      upArrowImage: PropTypes.node,
+      downArrowImage: PropTypes.node,
+      leftArrowImage: PropTypes.node,
+      rightArrowImage: PropTypes.node,
     };
   }
 
@@ -31,11 +39,11 @@ export default class Arrow extends Component {
   hasNext() {
     const { direction, infinite, numSlides, selectedIndex } = this.props;
 
-    return infinite || (direction === 'left' ? selectedIndex > 0 : selectedIndex < numSlides - 1);
+    return infinite || (['top', 'left'].includes(direction) ? selectedIndex > 0 : selectedIndex < numSlides - 1);
   }
 
   render() {
-    const { prevSlide, nextSlide, direction, arrows } = this.props;
+    const { prevSlide, nextSlide, direction, arrows, upArrowImage, downArrowImage, leftArrowImage, rightArrowImage } = this.props;
     let arrowComponent = null;
     let buttonClass = 'carousel-arrow-default';
 
@@ -48,9 +56,13 @@ export default class Arrow extends Component {
       <button
         type='button'
         disabled={ !this.hasNext() }
-        onClick={ direction === 'left' ? prevSlide : nextSlide }
+        onClick={ ['top', 'left'].includes(direction) ? prevSlide : nextSlide }
         className={ `carousel-arrow carousel-${direction}-arrow ${buttonClass}` }>
         { arrowComponent }
+        { direction === 'top' && (upArrowImage || <DefaultUpArrow/>)}
+        { direction === 'bottom' && (downArrowImage || <DefaultDownArrow/>)}
+        { direction === 'left' && (leftArrowImage || <DefaultLeftArrow/>)}
+        { direction === 'right' && (rightArrowImage || <DefaultRightArrow/>)}
       </button>
     );
   }