Finite variable width slider slides always fill the display area

src/inner-slider.js

@@ -10,6 +10,7 @@ import {
   extractObject,
   initializedState,
   getHeight,
+  getWidth,
   canGoNext,
   slideHandler,
   changeSlide,
@@ -36,7 +37,8 @@ export class InnerSlider extends React.Component {
     this.state = {
       ...initialState,
       currentSlide: this.props.initialSlide,
-      slideCount: React.Children.count(this.props.children)
+      slideCount: React.Children.count(this.props.children),
+      slidesToShow: this.props.slidesToShow
     };
     this.callbackTimers = [];
     this.clickable = true;
@@ -194,8 +196,35 @@ export class InnerSlider extends React.Component {
     this.debouncedResize = debounce(() => this.resizeWindow(setTrackStyle), 50);
     this.debouncedResize();
   };
+  calcRealSlideShowed = () => {
+    var realSlideShowed = 0;
+    if (!this.props.infinite && this.props.variableWidth) {
+      let widthUntilListRightEnd = 0;
+      var trackElem = ReactDOM.findDOMNode(this.track);
+      var listWidth = Math.ceil(getWidth(ReactDOM.findDOMNode(this.list)));
+      for (
+        let slide = this.state.currentSlide;
+        slide < trackElem.childNodes.length;
+        slide++
+      ) {
+        widthUntilListRightEnd +=
+          trackElem &&
+          trackElem.children[slide] &&
+          trackElem.children[slide].offsetWidth;
+
+        if (widthUntilListRightEnd >= listWidth) {
+          realSlideShowed = slide - 2;
+          break;
+        }
+      }
+    }
+    this.setState({
+      slidesToShow: realSlideShowed || this.props.slidesToShow
+    });
+  };
   resizeWindow = (setTrackStyle = true) => {
     if (!ReactDOM.findDOMNode(this.track)) return;
+    this.calcRealSlideShowed();
     let spec = {
       listRef: this.list,
       trackRef: this.track,
@@ -276,15 +305,15 @@ export class InnerSlider extends React.Component {
     let childrenCount = React.Children.count(this.props.children);
     const spec = { ...this.props, ...this.state, slideCount: childrenCount };
     let slideCount = getPreClones(spec) + getPostClones(spec) + childrenCount;
-    let trackWidth = 100 / this.props.slidesToShow * slideCount;
+    let trackWidth = (100 / this.props.slidesToShow) * slideCount;
     let slideWidth = 100 / slideCount;
     let trackLeft =
-      -slideWidth *
-      (getPreClones(spec) + this.state.currentSlide) *
-      trackWidth /
+      (-slideWidth *
+        (getPreClones(spec) + this.state.currentSlide) *
+        trackWidth) /
       100;
     if (this.props.centerMode) {
-      trackLeft += (100 - slideWidth * trackWidth / 100) / 2;
+      trackLeft += (100 - (slideWidth * trackWidth) / 100) / 2;
     }
     let trackStyle = {
       width: trackWidth + "%",

src/utils/innerSliderUtils.js

@@ -48,7 +48,7 @@ export const getSwipeDirection = (touchObject, verticalSwiping = false) => {
   xDist = touchObject.startX - touchObject.curX;
   yDist = touchObject.startY - touchObject.curY;
   r = Math.atan2(yDist, xDist);
-  swipeAngle = Math.round(r * 180 / Math.PI);
+  swipeAngle = Math.round((r * 180) / Math.PI);
   if (swipeAngle < 0) {
     swipeAngle = 360 - Math.abs(swipeAngle);
   }
@@ -195,7 +195,7 @@ export const slideHandler = spec => {
       finalSlide = animationSlide + slideCount;
       if (!infinite) finalSlide = 0;
       else if (slideCount % slidesToScroll !== 0)
-        finalSlide = slideCount - slideCount % slidesToScroll;
+        finalSlide = slideCount - (slideCount % slidesToScroll);
     } else if (!canGoNext(spec) && animationSlide > currentSlide) {
       animationSlide = finalSlide = currentSlide;
     } else if (centerMode && animationSlide >= slideCount) {
@@ -265,7 +265,8 @@ export const changeSlide = (spec, options) => {
     slideOffset = indexOffset === 0 ? slidesToScroll : indexOffset;
     targetSlide = currentSlide + slideOffset;
     if (lazyLoad && !infinite) {
-      targetSlide = (currentSlide + slidesToScroll) % slideCount + indexOffset;
+      targetSlide =
+        ((currentSlide + slidesToScroll) % slideCount) + indexOffset;
     }
   } else if (options.message === "dots") {
     // Click on dots
@@ -567,7 +568,14 @@ export const getTrackCSS = spec => {
   let trackWidth, trackHeight;
   const trackChildren = spec.slideCount + 2 * spec.slidesToShow;
   if (!spec.vertical) {
-    trackWidth = getTotalSlides(spec) * spec.slideWidth;
+    if (spec.variableWidth) {
+      trackWidth = 0;
+      spec.children.forEach(function(child) {
+        trackWidth += child.props.style.width;
+      });
+    } else {
+      trackWidth = getTotalSlides(spec) * spec.slideWidth;
+    }
   } else {
     trackHeight = trackChildren * spec.slideHeight;
   }
@@ -704,7 +712,7 @@ export const getTrackLeft = spec => {
       slideCount % slidesToScroll !== 0 &&
       slideIndex + slidesToScroll > slideCount
     ) {
-      slidesToOffset = slidesToShow - slideCount % slidesToScroll;
+      slidesToOffset = slidesToShow - (slideCount % slidesToScroll);
     }
     if (centerMode) {
       slidesToOffset = parseInt(slidesToShow / 2);
@@ -725,6 +733,25 @@ export const getTrackLeft = spec => {
     targetSlideIndex = slideIndex + getPreClones(spec);
     targetSlide = trackElem && trackElem.childNodes[targetSlideIndex];
     targetLeft = targetSlide ? targetSlide.offsetLeft * -1 : 0;
+    if (!infinite) {
+      let widthUntilListRightEnd = 0;
+      for (
+        let slide = targetSlideIndex;
+        slide < trackElem.childNodes.length;
+        slide++
+      ) {
+        widthUntilListRightEnd +=
+          trackElem &&
+          trackElem.children[slide] &&
+          trackElem.children[slide].offsetWidth;
+      }
+      if (widthUntilListRightEnd < listWidth) {
+        targetLeft += listWidth - widthUntilListRightEnd;
+        if (targetLeft >= 0) {
+          targetLeft = 0;
+        }
+      }
+    }
     if (centerMode === true) {
       targetSlideIndex = infinite
         ? slideIndex + getPreClones(spec)