Add slide alignment prop

Author: eddiemcleanlux

README.md

@@ -112,6 +112,11 @@ Used to specify a fixed width for all slides. Without specifying this, slides wi
 Used to specify a fixed height for all slides. Without specifying this, slides will simply be the height of their
 content.
 
+#### slideAlignment
+`PropTypes.oneOf(['left', 'center', 'right'])`
+
+Used to set the alignment of the currently selected slide in the carousel's viewport. Defaults to `center`.
+
 #### beforeChange
 `PropTypes.func`
 

src/index.js

@@ -46,6 +46,7 @@ export default class Carousel extends Component {
       cellPadding: PropTypes.number,
       slideWidth: PropTypes.string,
       slideHeight: PropTypes.string,
+      slideAlignment: PropTypes.oneOf(['left', 'center', 'right']),
       beforeChange: PropTypes.func,
       afterChange: PropTypes.func,
       transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -92,6 +93,7 @@ export default class Carousel extends Component {
       imagesToPrefetch: 5,
       maxRenderedSlides: 5,
       cellPadding: 0,
+      slideAlignment: 'center',
       transitionDuration: 500,
       autoplay: false,
       autoplaySpeed: 4000,
@@ -135,15 +137,16 @@ export default class Carousel extends Component {
 
   componentDidUpdate(prevProps, prevState) {
     const { children, autoplay, slideWidth } = this.props;
-    const { currentSlide, loadedImages, direction, loading, slideDimensions } = this.state;
+    const { currentSlide, loadedImages, direction, loading, slideDimensions, slideAlignment } = this.state;
     const oldChildren = prevProps.children;
 
     if (direction !== prevState.direction ||
         currentSlide !== prevState.currentSlide ||
         loadedImages !== prevState.loadedImages ||
         slideWidth !== prevProps.slideWidth ||
         slideDimensions.width !== prevState.slideDimensions.width ||
-        slideDimensions.height !== prevState.slideDimensions.height) {
+        slideDimensions.height !== prevState.slideDimensions.height ||
+        slideAlignment !== prevProps.slideAlignment) {
       // Whenever new images are loaded, the current slide index changes, the transition direction changes, or the
       // slide width changes, we need to recalculate the left offset positioning of the slides.
       this.calcLeftOffset();
@@ -691,7 +694,7 @@ export default class Carousel extends Component {
       return;
     }
 
-    const { infinite, children, cellPadding } = this.props;
+    const { infinite, children, cellPadding, slideAlignment } = this.props;
     let { currentSlide } = this.state;
     const slides = this._track.childNodes;
     const numChildren = Children.count(children);
@@ -721,8 +724,13 @@ export default class Carousel extends Component {
       leftOffset -= currentSlideWidth;
     }
 
-    // Center the current slide within the viewport
-    leftOffset += (viewportWidth - currentSlideWidth) / 2;
+    // Adjust the offset to get the correct alignment of current slide within the viewport
+    if (slideAlignment === 'center') {
+      leftOffset += (viewportWidth - currentSlideWidth) / 2;
+    } else if (slideAlignment === 'right') {
+      leftOffset += (viewportWidth - currentSlideWidth);
+    }
+
     const shouldRetry = foundZeroWidthSlide && retryCount < MAX_LOAD_RETRIES;
 
     if (leftOffset !== this.state.leftOffset) {

src/stories/index.stories.js

@@ -227,3 +227,13 @@ export const addImages = () => {
     </Fragment>
   );
 };
+
+export const leftAlignedSlides = () =>
+  <Carousel width='450px' cellPadding={ 5 } slideAlignment='left'>
+    { imgElements }
+  </Carousel>;
+
+export const rightAlignedSlides = () =>
+  <Carousel width='450px' cellPadding={ 5 } slideAlignment='right'>
+    { imgElements }
+  </Carousel>;