Updates.

Author: jsanthosh-godaddy

src/carousel.less

@@ -77,11 +77,11 @@
   }
 
   .carousel-top-arrow {
-    top: 23px;
+    top: 75px;
   }
 
   .carousel-bottom-arrow {
-    bottom: 23px;
+    bottom: 75px;
   }
 
   .carousel-top-arrow {

src/stories/CustomArrow.js

@@ -9,7 +9,7 @@ const CustomArrow = ({ nextSlide, prevSlide, overrideArrowStyle = {}, direction,
 
     const hasNextSlide = hasNext();
     return (
-        <button disabled={ !hasNextSlide } onClick={ isTopOrLeft ? prevSlide : nextSlide } style={{ ...overrideArrowStyle, opacity: !hasNextSlide ? 0.5 : 1 }}>
+        <button className='carousel-custom-arrow' disabled={ !hasNextSlide } onClick={ isTopOrLeft ? prevSlide : nextSlide } style={{ ...overrideArrowStyle, ...{ opacity: !hasNextSlide ? 0.5 : 1 }, ...{ cursor: !hasNextSlide ? 'not-allowed' : 'pointer' } }}>
             {customImage}
         </button>
     );

test/unit/carousel.tests.js

@@ -492,8 +492,8 @@ describe('Carousel', () => {
         </Carousel>);
 
     const controlComponent = tree.find('.control-div');
-    expect(controlComponent.childAt(0).html()).to.eql('<button disabled="" style="background: none; opacity: 0.5;"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="m0 16.67 2.829 2.83 9.175-9.339 9.167 9.339L24 16.67 12.004 4.5z"></path></svg></button>');
-    expect(controlComponent.childAt(1).html()).to.eql('<button style="background: none; opacity: 1;"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M0 7.33 2.829 4.5l9.175 9.339L21.171 4.5 24 7.33 12.004 19.5z"></path></svg></button>');
+    expect(controlComponent.childAt(0).html()).to.eql('<button class="carousel-custom-arrow" disabled="" style="background: none; opacity: 0.5; cursor: not-allowed;"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="m0 16.67 2.829 2.83 9.175-9.339 9.167 9.339L24 16.67 12.004 4.5z"></path></svg></button>');
+    expect(controlComponent.childAt(1).html()).to.eql('<button class="carousel-custom-arrow" style="background: none; opacity: 1; cursor: pointer;"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M0 7.33 2.829 4.5l9.175 9.339L21.171 4.5 24 7.33 12.004 19.5z"></path></svg></button>');
 
   });