diff --git a/__tests__/innerSliderUtils.test.js b/__tests__/innerSliderUtils.test.js new file mode 100644 index 000000000..09ae5cb31 --- /dev/null +++ b/__tests__/innerSliderUtils.test.js @@ -0,0 +1,33 @@ +import { changeSlide } from "../src/utils/innerSliderUtils"; + +describe("changeSlide", () => { + it("should not pass to before 0 when not infinite", function() { + const settings = { + slidesToScroll: 1, + slidesToShow: 1, + slideCount: 10, + currentSlide: 0, + targetSlide: 0, + lazyLoad: false, + infinite: false + }; + + const targetSlide = changeSlide(settings, { message: "previous" }); + expect(targetSlide).toEqual(0); + }); + + it("should not pass to after last slide when not infinite", function() { + const settings = { + slidesToScroll: 1, + slidesToShow: 1, + slideCount: 10, + currentSlide: 9, + targetSlide: 9, + lazyLoad: false, + infinite: false + }; + + const targetSlide = changeSlide(settings, { message: "next" }); + expect(targetSlide).toEqual(9); + }); +}); diff --git a/src/inner-slider.js b/src/inner-slider.js index 7cbdb27ad..74491429b 100644 --- a/src/inner-slider.js +++ b/src/inner-slider.js @@ -35,6 +35,7 @@ export class InnerSlider extends React.Component { this.state = { ...initialState, currentSlide: this.props.initialSlide, + targetSlide: this.props.initialSlide, slideCount: React.Children.count(this.props.children) }; this.callbackTimers = []; @@ -304,7 +305,8 @@ export class InnerSlider extends React.Component { }; checkImagesLoad = () => { let images = - (this.list && this.list.querySelectorAll && + (this.list && + this.list.querySelectorAll && this.list.querySelectorAll(".slick-slide img")) || []; let imagesCount = images.length, diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js index c06029d0a..c8be6c159 100644 --- a/src/utils/innerSliderUtils.js +++ b/src/utils/innerSliderUtils.js @@ -6,10 +6,10 @@ export function clamp(number, lowerBound, upperBound) { export const safePreventDefault = event => { const passiveEvents = ["onTouchStart", "onTouchMove", "onWheel"]; - if(!passiveEvents.includes(event._reactName)) { + if (!passiveEvents.includes(event._reactName)) { event.preventDefault(); } -} +}; export const getOnDemandLazySlides = spec => { let onDemandSlides = []; @@ -268,7 +268,6 @@ export const changeSlide = (spec, options) => { slidesToShow, slideCount, currentSlide, - targetSlide: previousTargetSlide, lazyLoad, infinite } = spec; @@ -282,8 +281,8 @@ export const changeSlide = (spec, options) => { previousInt = currentSlide - slideOffset; targetSlide = previousInt === -1 ? slideCount - 1 : previousInt; } - if (!infinite) { - targetSlide = previousTargetSlide - slidesToScroll; + if (!infinite && targetSlide < 0) { + targetSlide = 0; } } else if (options.message === "next") { slideOffset = indexOffset === 0 ? slidesToScroll : indexOffset; @@ -292,8 +291,8 @@ export const changeSlide = (spec, options) => { targetSlide = ((currentSlide + slidesToScroll) % slideCount) + indexOffset; } - if (!infinite) { - targetSlide = previousTargetSlide + slidesToScroll; + if (!infinite && targetSlide >= slideCount) { + targetSlide = slideCount - 1; } } else if (options.message === "dots") { // Click on dots @@ -386,9 +385,12 @@ export const swipeMove = (e, spec) => { let touchSwipeLength = touchObject.swipeLength; if (!infinite) { if ( - (currentSlide === 0 && (swipeDirection === "right" || swipeDirection === "down")) || - (currentSlide + 1 >= dotCount && (swipeDirection === "left" || swipeDirection === "up")) || - (!canGoNext(spec) && (swipeDirection === "left" || swipeDirection === "up")) + (currentSlide === 0 && + (swipeDirection === "right" || swipeDirection === "down")) || + (currentSlide + 1 >= dotCount && + (swipeDirection === "left" || swipeDirection === "up")) || + (!canGoNext(spec) && + (swipeDirection === "left" || swipeDirection === "up")) ) { touchSwipeLength = touchObject.swipeLength * edgeFriction; if (edgeDragged === false && onEdge) {