remove flex direction.

Author: jsanthosh-godaddy

src/carousel.less

@@ -77,17 +77,18 @@
   }
 
   .carousel-top-arrow {
-    top: 75px;
+    top: 23px;
   }
 
   .carousel-bottom-arrow {
-    bottom: 75px;
+    bottom: 23px;
   }
 
   .carousel-top-arrow {
     &.carousel-arrow-default {
       &:before {
         content: '\1431';
+        padding-bottom: 2px;
       }
     }
   }
@@ -96,6 +97,7 @@
     &.carousel-arrow-default {
       &:before {
         content: '\142F';
+        padding-top: 2px;
       }
     }
   }

src/index.js

@@ -442,8 +442,7 @@ export default class Carousel extends Component {
       width,
       height,
       marginBottom: dots ? '20px' : 0,
-      ...(isVertical && !arrows) && { display: 'flex', flexDirection: 'row-reverse' },
-      ...(isVertical && arrows) && { display: 'flex', flexDirection: 'row' }
+      ...isVertical && { display: 'flex' }
     };
     const viewportStyle = { ...(style.viewport || {}),
       width: viewportWidth,
@@ -465,13 +464,6 @@ export default class Carousel extends Component {
     }
 
     const controls = this.getControls();
-    let arrowOffset = 0;
-    if (this._viewport && this._track) {
-      arrowOffset += this._viewport.offsetHeight / 2;
-      arrowOffset -= this.props.verticalArrowPadding;
-    }
-
-    const customArrowStyle = { ...(isVertical && !arrows) && { transform: `translateY(${ arrowOffset }px)` } };
 
     return (
       <div className={ classes } style={ containerStyle } ref={ c => { this._containerRef = c; } }>
@@ -519,8 +511,7 @@ export default class Carousel extends Component {
                 prevSlide={ this.prevSlide }
                 goToSlide={ this.goToSlide }
                 arrows={ arrows }
-                infinite={ infinite }
-                customArrowStyle={ customArrowStyle }/>
+                infinite={ infinite }/>
             ))
           }
         </div>

src/stories/CustomArrows.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const CustomArrows = ({ nextSlide, prevSlide, overrideArrowStyle = {}, infinite, numSlides, selectedIndex, topArrowImage, bottomArrowImage, customArrowStyle }) => {
+const CustomArrows = ({ nextSlide, prevSlide, overrideArrowStyle = {}, infinite, numSlides, selectedIndex, topArrowImage, bottomArrowImage, arrowDivStyle }) => {
     const hasNext = (direction) => {
         return infinite || (['top', 'left'].includes(direction) ? selectedIndex > 0 : selectedIndex < numSlides - 1);
     }
@@ -10,7 +10,7 @@ const CustomArrows = ({ nextSlide, prevSlide, overrideArrowStyle = {}, infinite,
     const hasNextTop = hasNext('top');
 
     return (
-        <div style={ customArrowStyle } className='custom-arrows-div'>
+        <div style={ arrowDivStyle } className='custom-arrows-div'>
             <button className='carousel-custom-arrow' disabled={ !hasNextTop } onClick={ hasNextTop ? prevSlide : nextSlide } style={{ ...overrideArrowStyle, ...{ opacity: !hasNextTop ? 0.5 : 1 }, ...{ cursor: !hasNextTop ? 'not-allowed' : 'pointer' } }}>
                 {topArrowImage}
             </button>
@@ -32,7 +32,7 @@ CustomArrows.propTypes = {
     selectedIndex: PropTypes.number,
     topArrowImage: PropTypes.node,
     bottomArrowImage: PropTypes.node,
-    customArrowStyle: PropTypes.object
+    arrowDivStyle: PropTypes.object
 };
 
 export default CustomArrows;

src/stories/index.stories.js

@@ -83,7 +83,7 @@ export const verticalNonInfiniteButtonsWithCellPaddingWithCustomArrows = () =>
     <Carousel height='450px' width='450px' cellPadding={ 5 } infinite={ false } arrows={ false }
               dots={ false } isVertical={ true } verticalArrowPadding={ 30 } controls={ [{
       component: CustomArrows,
-      props: { overrideArrowStyle: { border: 'none', background: 'none' }, topArrowImage: <UpArrow/>, bottomArrowImage: <DownArrow/> }
+      props: { overrideArrowStyle: { border: 'none', background: 'none' }, topArrowImage: <UpArrow/>, bottomArrowImage: <DownArrow/>, arrowDivStyle: { transform: 'translate(-450px, 196px)' } }
     }] }>
       { testButtons }
     </Carousel>;