From 065ec2f84e269fba8677784da1e5f81022202f1b Mon Sep 17 00:00:00 2001 From: Ramiro Di Modica Date: Wed, 17 Apr 2019 17:16:18 -0300 Subject: [PATCH 1/4] update variablewidth option --- src/utils/innerSliderUtils.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js index 003298eb7..f0c9be5a5 100644 --- a/src/utils/innerSliderUtils.js +++ b/src/utils/innerSliderUtils.js @@ -725,6 +725,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) From 59d11f3f1a5bb825be5a4ece55e9bdc7e979c270 Mon Sep 17 00:00:00 2001 From: Ramiro Di Modica Date: Wed, 17 Apr 2019 17:44:11 -0300 Subject: [PATCH 2/4] variablewidth + infinite false --- src/utils/innerSliderUtils.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js index f0c9be5a5..a2d52bc62 100644 --- a/src/utils/innerSliderUtils.js +++ b/src/utils/innerSliderUtils.js @@ -567,7 +567,9 @@ export const getTrackCSS = spec => { let trackWidth, trackHeight; const trackChildren = spec.slideCount + 2 * spec.slidesToShow; if (!spec.vertical) { - trackWidth = getTotalSlides(spec) * spec.slideWidth; + spec.children.forEach(function (child) { + trackWidth += child.props.style.width; + }); } else { trackHeight = trackChildren * spec.slideHeight; } From 6156165452b9aa76e89a0d7588488ee0a6676ed3 Mon Sep 17 00:00:00 2001 From: Ramiro Di Modica Date: Wed, 17 Apr 2019 18:06:47 -0300 Subject: [PATCH 3/4] variablewidth + infinite false --- src/inner-slider.js | 41 ++++++++++++++++++++++++++++++----- src/utils/innerSliderUtils.js | 12 +++++----- 2 files changed, 42 insertions(+), 11 deletions(-) diff --git a/src/inner-slider.js b/src/inner-slider.js index d3d115f1a..70639cfd5 100644 --- a/src/inner-slider.js +++ b/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 + "%", diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js index a2d52bc62..62e17ccf6 100644 --- a/src/utils/innerSliderUtils.js +++ b/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,8 @@ export const getTrackCSS = spec => { let trackWidth, trackHeight; const trackChildren = spec.slideCount + 2 * spec.slidesToShow; if (!spec.vertical) { - spec.children.forEach(function (child) { + trackWidth = 0; + spec.children.forEach(function(child) { trackWidth += child.props.style.width; }); } else { @@ -706,7 +708,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); From a7b7da9144043366176e28434cb10a0ae0224ddb Mon Sep 17 00:00:00 2001 From: Ramiro Di Modica Date: Mon, 22 Apr 2019 11:17:04 -0300 Subject: [PATCH 4/4] add conditional --- src/utils/innerSliderUtils.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js index 62e17ccf6..ac3f3e3d3 100644 --- a/src/utils/innerSliderUtils.js +++ b/src/utils/innerSliderUtils.js @@ -568,10 +568,14 @@ export const getTrackCSS = spec => { let trackWidth, trackHeight; const trackChildren = spec.slideCount + 2 * spec.slidesToShow; if (!spec.vertical) { - trackWidth = 0; - spec.children.forEach(function(child) { - trackWidth += child.props.style.width; - }); + 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; }