react-spring-carousel 3.0.0-beta003 → 3.0.0-beta006

package/dist/cjs/index.js

@@ -6,11 +6,11 @@ var react = require('react');
 var react$1 = require('@use-gesture/react');
 var screenfull = require('screenfull');
 
-const eventLabel = "RSC::Event";
+const eventLabel = 'RSC::Event';
 function useEventsModule() {
     const targetEvent = react.useRef(null);
     react.useEffect(() => {
-        targetEvent.current = document.createElement("div");
+        targetEvent.current = document.createElement('div');
     }, []);
     function useListenToCustomEvent(eventHandler) {
         react.useEffect(() => {
@@ -49,7 +49,7 @@ function useFullscreenModule({ mainCarouselWrapperRef, emitEvent, handleResize,
             if (document.fullscreenElement) {
                 setIsFullscreen(true);
                 emitEvent({
-                    eventName: "onFullscreenChange",
+                    eventName: 'onFullscreenChange',
                     isFullscreen: true,
                 });
                 handleResize && handleResize();
@@ -57,17 +57,17 @@ function useFullscreenModule({ mainCarouselWrapperRef, emitEvent, handleResize,
             if (!document.fullscreenElement) {
                 setIsFullscreen(false);
                 emitEvent({
-                    eventName: "onFullscreenChange",
+                    eventName: 'onFullscreenChange',
                     isFullscreen: false,
                 });
                 handleResize && handleResize();
             }
         }
         if (screenfull.isEnabled) {
-            screenfull.on("change", handleFullscreenChange);
+            screenfull.on('change', handleFullscreenChange);
             return () => {
                 if (screenfull.isEnabled) {
-                    screenfull.off("change", handleFullscreenChange);
+                    screenfull.off('change', handleFullscreenChange);
                 }
             };
         }
@@ -97,19 +97,18 @@ function isInViewport(el) {
     const rect = el.getBoundingClientRect();
     return (rect.top >= 0 &&
         rect.left >= 0 &&
-        rect.bottom <=
-            (window.innerHeight || document.documentElement.clientHeight) &&
+        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
         rect.right <= (window.innerWidth || document.documentElement.clientWidth));
 }
-function useThumbsModule({ thumbsSlideAxis = "x", withThumbs = false, prepareThumbsData, items, }) {
+function useThumbsModule({ thumbsSlideAxis = 'x', withThumbs = false, prepareThumbsData, items, }) {
     const wrapperRef = react.useRef(null);
     const [spring, setSpring] = web.useSpring(() => ({
         val: 0,
     }));
     function getTotalScrollValue() {
         var _a;
-        return Math.round(Number((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a[thumbsSlideAxis === "x" ? "scrollWidth" : "scrollHeight"]) -
-            wrapperRef.current.getBoundingClientRect()[thumbsSlideAxis === "x" ? "width" : "height"]);
+        return Math.round(Number((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a[thumbsSlideAxis === 'x' ? 'scrollWidth' : 'scrollHeight']) -
+            wrapperRef.current.getBoundingClientRect()[thumbsSlideAxis === 'x' ? 'width' : 'height']);
     }
     function handleScroll(activeItem) {
         var _a, _b;
@@ -126,14 +125,15 @@ function useThumbsModule({ thumbsSlideAxis = "x", withThumbs = false, prepareThu
                 const val = offset > getTotalScrollValue() ? getTotalScrollValue() : offset;
                 setSpring.start({
                     from: {
-                        val: (_b = (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a[thumbsSlideAxis === "x" ? "scrollLeft" : "scrollTop"]) !== null && _b !== void 0 ? _b : 0,
+                        val: (_b = (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a[thumbsSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop']) !== null && _b !== void 0 ? _b : 0,
                     },
                     to: {
                         val,
                     },
                     onChange: ({ value }) => {
                         if (wrapperRef.current) {
-                            wrapperRef.current[thumbsSlideAxis === "x" ? "scrollLeft" : "scrollTop"] = Math.abs(value.val);
+                            wrapperRef.current[thumbsSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'] =
+                                Math.abs(value.val);
                         }
                     },
                 });
@@ -142,7 +142,7 @@ function useThumbsModule({ thumbsSlideAxis = "x", withThumbs = false, prepareThu
     }
     function handlePrepareThumbsData() {
         function getPreparedItems(_items) {
-            return _items.map((i) => ({
+            return _items.map(i => ({
                 id: i.id,
                 renderThumb: i.renderThumb,
             }));
@@ -152,11 +152,11 @@ function useThumbsModule({ thumbsSlideAxis = "x", withThumbs = false, prepareThu
         }
         return getPreparedItems(items);
     }
-    const thumbsFragment = withThumbs ? (jsxRuntime.jsx("div", Object.assign({ className: "use-spring-carousel-thumbs-wrapper", ref: wrapperRef, onWheel: () => spring.val.stop(), style: Object.assign({ display: "flex", flex: "1", position: "relative", width: "100%", height: "100%", flexDirection: thumbsSlideAxis === "x" ? "row" : "column" }, (thumbsSlideAxis === "x"
-            ? { overflowX: "auto" }
+    const thumbsFragment = withThumbs ? (jsxRuntime.jsx("div", Object.assign({ className: "use-spring-carousel-thumbs-wrapper", ref: wrapperRef, onWheel: () => spring.val.stop(), style: Object.assign({ display: 'flex', flex: '1', position: 'relative', width: '100%', height: '100%', flexDirection: thumbsSlideAxis === 'x' ? 'row' : 'column' }, (thumbsSlideAxis === 'x'
+            ? { overflowX: 'auto' }
             : {
-                overflowY: "auto",
-                maxHeight: "100%",
+                overflowY: 'auto',
+                maxHeight: '100%',
             })) }, { children: handlePrepareThumbsData().map(({ id, renderThumb }) => {
             const thumbId = `thumb-item-${id}`;
             return (jsxRuntime.jsx("div", Object.assign({ id: thumbId, className: "thumb-item" }, { children: renderThumb }), thumbId));
@@ -167,11 +167,11 @@ function useThumbsModule({ thumbsSlideAxis = "x", withThumbs = false, prepareThu
     };
 }
 
-function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "x", itemsPerSlide = 1, slideType = "fixed", gutter = 0, withLoop = false, startEndGutter = 0, carouselSlideAxis = "x", disableGestures = false, draggingSlideTreshold: _draggingSlideTreshold, slideWhenThresholdIsReached = false, freeScroll, enableFreeScrollDrag, initialStartingPosition, prepareThumbsData, initialActiveItem = 0, }) {
+function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = 'x', itemsPerSlide = 1, slideType = 'fixed', gutter = 0, withLoop = false, startEndGutter = 0, carouselSlideAxis = 'x', disableGestures = false, draggingSlideTreshold: _draggingSlideTreshold, slideWhenThresholdIsReached = false, freeScroll, enableFreeScrollDrag, initialStartingPosition, prepareThumbsData, initialActiveItem = 0, }) {
     const prevWindowWidth = react.useRef(0);
     const draggingSlideTreshold = react.useRef(_draggingSlideTreshold !== null && _draggingSlideTreshold !== void 0 ? _draggingSlideTreshold : 0);
-    const slideActionType = react.useRef("initial");
-    const slideModeType = react.useRef("initial");
+    const slideActionType = react.useRef('initial');
+    const slideModeType = react.useRef('initial');
     const prevSlidedValue = react.useRef(0);
     const [spring, setSpring] = web.useSpring(() => ({
         val: 0,
@@ -179,7 +179,7 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
         onChange({ value }) {
             if (freeScroll && mainCarouselWrapperRef.current) {
                 setStartEndItemReachedOnFreeScroll();
-                if (carouselSlideAxis === "x") {
+                if (carouselSlideAxis === 'x') {
                     mainCarouselWrapperRef.current.scrollLeft = Math.abs(value.val);
                 }
                 else {
@@ -187,7 +187,7 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
                 }
             }
             else if (carouselTrackWrapperRef.current) {
-                if (carouselSlideAxis === "x") {
+                if (carouselSlideAxis === 'x') {
                     carouselTrackWrapperRef.current.style.transform = `translate3d(${value.val}px, 0px,0px)`;
                 }
                 else {
@@ -204,9 +204,9 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
     const getItems = react.useCallback(() => {
         if (withLoop) {
             return [
-                ...items.map((i) => (Object.assign(Object.assign({}, i), { id: `prev-repeated-item-${i.id}` }))),
+                ...items.map(i => (Object.assign(Object.assign({}, i), { id: `prev-repeated-item-${i.id}` }))),
                 ...items,
-                ...items.map((i) => (Object.assign(Object.assign({}, i), { id: `next-repeated-item-${i.id}` }))),
+                ...items.map(i => (Object.assign(Object.assign({}, i), { id: `next-repeated-item-${i.id}` }))),
             ];
         }
         return [...items];
@@ -225,7 +225,7 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
         handleResize: () => adjustCarouselWrapperPosition(),
     });
     function getItemStyles() {
-        if (slideType === "fixed" && !freeScroll) {
+        if (slideType === 'fixed' && !freeScroll) {
             return {
                 marginRight: `${gutter}px`,
                 flex: `1 0 calc(100% / ${itemsPerSlide} - ${(gutter * (itemsPerSlide - 1)) / itemsPerSlide}px)`,
@@ -235,27 +235,27 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
     }
     function getSlideValue() {
         var _a;
-        const carouselItem = (_a = mainCarouselWrapperRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".use-spring-carousel-item");
+        const carouselItem = (_a = mainCarouselWrapperRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.use-spring-carousel-item');
         if (!carouselItem) {
-            throw Error("No carousel items available!");
+            throw Error('No carousel items available!');
         }
-        return (carouselItem.getBoundingClientRect()[carouselSlideAxis === "x" ? "width" : "height"] + gutter);
+        return (carouselItem.getBoundingClientRect()[carouselSlideAxis === 'x' ? 'width' : 'height'] + gutter);
     }
     function slideToItem({ from, to, nextActiveItem, immediate = false, slideMode, }) {
         slideModeType.current = slideMode;
-        if (typeof nextActiveItem === "number") {
+        if (typeof nextActiveItem === 'number') {
             if (!freeScroll) {
                 activeItem.current = nextActiveItem;
             }
             emitEvent({
-                eventName: "onSlideStartChange",
+                eventName: 'onSlideStartChange',
                 slideActionType: slideActionType.current,
                 slideMode: slideModeType.current,
                 nextItem: {
                     startReached: firstItemReached.current,
                     endReached: lastItemReached.current,
                     index: freeScroll ? -1 : activeItem.current,
-                    id: freeScroll ? "" : items[activeItem.current].id,
+                    id: freeScroll ? '' : items[activeItem.current].id,
                 },
             });
         }
@@ -272,14 +272,14 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
             onRest(value) {
                 if (!immediate && value.finished) {
                     emitEvent({
-                        eventName: "onSlideChange",
+                        eventName: 'onSlideChange',
                         slideActionType: slideActionType.current,
                         slideMode: slideModeType.current,
                         currentItem: {
                             startReached: firstItemReached.current,
                             endReached: lastItemReached.current,
                             index: freeScroll ? -1 : activeItem.current,
-                            id: freeScroll ? "" : items[activeItem.current].id,
+                            id: freeScroll ? '' : items[activeItem.current].id,
                         },
                     });
                 }
@@ -294,38 +294,38 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
         if (withLoop) {
             return getSlideValue() * items.length;
         }
-        return Math.round(Number((_a = carouselTrackWrapperRef.current) === null || _a === void 0 ? void 0 : _a[carouselSlideAxis === "x" ? "scrollWidth" : "scrollHeight"]) -
-            carouselTrackWrapperRef.current.getBoundingClientRect()[carouselSlideAxis === "x" ? "width" : "height"]);
+        return Math.round(Number((_a = carouselTrackWrapperRef.current) === null || _a === void 0 ? void 0 : _a[carouselSlideAxis === 'x' ? 'scrollWidth' : 'scrollHeight']) -
+            carouselTrackWrapperRef.current.getBoundingClientRect()[carouselSlideAxis === 'x' ? 'width' : 'height']);
     }
     function getAnimatedWrapperStyles() {
         const percentValue = `calc(100% - ${startEndGutter * 2}px)`;
         return {
-            width: carouselSlideAxis === "x" ? percentValue : "100%",
-            height: carouselSlideAxis === "y" ? percentValue : "100%",
+            width: carouselSlideAxis === 'x' ? percentValue : '100%',
+            height: carouselSlideAxis === 'y' ? percentValue : '100%',
         };
     }
     function getCarouselItemWidth() {
         var _a;
-        const carouselItem = (_a = carouselTrackWrapperRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".use-spring-carousel-item");
+        const carouselItem = (_a = carouselTrackWrapperRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.use-spring-carousel-item');
         if (!carouselItem) {
-            throw Error("No carousel items available!");
+            throw Error('No carousel items available!');
         }
-        return (carouselItem.getBoundingClientRect()[carouselSlideAxis === "x" ? "width" : "height"] + gutter);
+        return (carouselItem.getBoundingClientRect()[carouselSlideAxis === 'x' ? 'width' : 'height'] + gutter);
     }
     function adjustCarouselWrapperPosition() {
-        const positionProperty = carouselSlideAxis === "x" ? "left" : "top";
+        const positionProperty = carouselSlideAxis === 'x' ? 'left' : 'top';
         function setPosition(v) {
             const ref = carouselTrackWrapperRef.current;
             if (!ref)
                 return;
             if (withLoop) {
-                ref.style.top = "0px";
-                ref.style.left = "0px";
+                ref.style.top = '0px';
+                ref.style.left = '0px';
                 ref.style[positionProperty] = `-${v - startEndGutter}px`;
             }
             else {
-                ref.style.left = "0px";
-                ref.style.top = "0px";
+                ref.style.left = '0px';
+                ref.style.top = '0px';
             }
         }
         const currentFromValue = Math.abs(getFromValue());
@@ -342,18 +342,18 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
             });
             return;
         }
-        if (initialStartingPosition === "center") {
+        if (initialStartingPosition === 'center') {
             setPosition(getCarouselItemWidth() * items.length -
                 getSlideValue() * Math.round((itemsPerSlide - 1) / 2));
         }
-        else if (initialStartingPosition === "end") {
+        else if (initialStartingPosition === 'end') {
             setPosition(getCarouselItemWidth() * items.length -
                 getSlideValue() * Math.round(itemsPerSlide - 1));
         }
         else {
             setPosition(getCarouselItemWidth() * items.length);
         }
-        if (!freeScroll && slideType === "fixed") {
+        if (!freeScroll && slideType === 'fixed') {
             const val = -(getSlideValue() * activeItem.current);
             prevSlidedValue.current = val;
             setSpring.start({
@@ -364,26 +364,26 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
     }
     function getFromValue() {
         if (freeScroll && mainCarouselWrapperRef.current) {
-            return mainCarouselWrapperRef.current[carouselSlideAxis === "x" ? "scrollLeft" : "scrollTop"];
+            return mainCarouselWrapperRef.current[carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'];
         }
         return spring.val.get();
     }
     function getToValue(type, index) {
-        if (freeScroll && type === "next") {
+        if (freeScroll && type === 'next') {
             const next = prevSlidedValue.current + getSlideValue();
             if (next > getTotalScrollValue()) {
                 return getTotalScrollValue();
             }
             return next;
         }
-        if (freeScroll && type === "prev") {
+        if (freeScroll && type === 'prev') {
             const next = prevSlidedValue.current - getSlideValue();
             if (next < 0) {
                 return 0;
             }
             return next;
         }
-        if (type === "next") {
+        if (type === 'next') {
             if (index) {
                 return -(index * getSlideValue());
             }
@@ -394,14 +394,14 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
         }
         return prevSlidedValue.current + getSlideValue();
     }
-    function slideToPrevItem(type = "click", index) {
+    function slideToPrevItem(type = 'click', index) {
         if (!init || (firstItemReached.current && !withLoop))
             return;
-        slideActionType.current = "prev";
+        slideActionType.current = 'prev';
         lastItemReached.current = false;
         const nextItem = index || activeItem.current - 1;
         if (!withLoop) {
-            const nextItemWillExceed = getToValue("prev", index) + getSlideValue() / 3 > 0;
+            const nextItemWillExceed = getToValue('prev', index) + getSlideValue() / 3 > 0;
             if (firstItemReached.current)
                 return;
             if (nextItemWillExceed) {
@@ -436,19 +436,18 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
         slideToItem({
             slideMode: type,
             from: getFromValue(),
-            to: getToValue("prev", index),
+            to: getToValue('prev', index),
             nextActiveItem: nextItem,
         });
     }
-    function slideToNextItem(type = "click", index) {
+    function slideToNextItem(type = 'click', index) {
         if (!init || (lastItemReached.current && !withLoop))
             return;
-        slideActionType.current = "next";
+        slideActionType.current = 'next';
         firstItemReached.current = false;
         const nextItem = index || activeItem.current + 1;
         if (!withLoop) {
-            const nextItemWillExceed = Math.abs(getToValue("next", index)) >
-                getTotalScrollValue() - getSlideValue() / 3;
+            const nextItemWillExceed = Math.abs(getToValue('next', index)) > getTotalScrollValue() - getSlideValue() / 3;
             if (lastItemReached.current)
                 return;
             if (nextItemWillExceed) {
@@ -483,7 +482,7 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
         slideToItem({
             slideMode: type,
             from: getFromValue(),
-            to: getToValue("next", index),
+            to: getToValue('next', index),
             nextActiveItem: nextItem,
         });
     }
@@ -525,28 +524,28 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
             prevWindowWidth.current = window.innerWidth;
             adjustCarouselWrapperPosition();
         }
-        window.addEventListener("resize", handleResize);
+        window.addEventListener('resize', handleResize);
         return () => {
-            window.removeEventListener("resize", handleResize);
+            window.removeEventListener('resize', handleResize);
         };
     }, []);
-    const bindDrag = react$1.useDrag((state) => {
+    const bindDrag = react$1.useDrag(state => {
         const isDragging = state.dragging;
-        const movement = state.offset[carouselSlideAxis === "x" ? 0 : 1];
-        const currentMovement = state.movement[carouselSlideAxis === "x" ? 0 : 1];
-        const direction = state.direction[carouselSlideAxis === "x" ? 0 : 1];
+        const movement = state.offset[carouselSlideAxis === 'x' ? 0 : 1];
+        const currentMovement = state.movement[carouselSlideAxis === 'x' ? 0 : 1];
+        const direction = state.direction[carouselSlideAxis === 'x' ? 0 : 1];
         const prevItemTreshold = currentMovement > draggingSlideTreshold.current;
         const nextItemTreshold = currentMovement < -draggingSlideTreshold.current;
         if (isDragging) {
             if (direction > 0) {
-                slideActionType.current = "prev";
+                slideActionType.current = 'prev';
             }
             else {
-                slideActionType.current = "next";
+                slideActionType.current = 'next';
             }
-            emitEvent(Object.assign(Object.assign({}, state), { eventName: "onDrag", slideActionType: slideActionType.current }));
+            emitEvent(Object.assign(Object.assign({}, state), { eventName: 'onDrag', slideActionType: slideActionType.current }));
             if (freeScroll) {
-                if (slideActionType.current === "prev" && movement > 0) {
+                if (slideActionType.current === 'prev' && movement > 0) {
                     state.cancel();
                     setSpring.start({
                         from: {
@@ -587,21 +586,21 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
                 },
             });
             if (slideWhenThresholdIsReached && nextItemTreshold) {
-                slideToNextItem("drag");
+                slideToNextItem('drag');
                 state.cancel();
             }
             else if (slideWhenThresholdIsReached && prevItemTreshold) {
-                slideToPrevItem("drag");
+                slideToPrevItem('drag');
                 state.cancel();
             }
             return;
         }
         if (state.last && !state.canceled && freeScroll) {
-            if (slideActionType.current === "prev") {
-                slideToPrevItem("drag");
+            if (slideActionType.current === 'prev') {
+                slideToPrevItem('drag');
             }
-            if (slideActionType.current === "next") {
-                slideToNextItem("drag");
+            if (slideActionType.current === 'next') {
+                slideToNextItem('drag');
             }
         }
         if (state.last && !state.canceled && !freeScroll) {
@@ -613,7 +612,7 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
                     });
                 }
                 else {
-                    slideToNextItem("drag");
+                    slideToNextItem('drag');
                 }
             }
             else if (prevItemTreshold) {
@@ -624,7 +623,7 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
                     });
                 }
                 else {
-                    slideToPrevItem("drag");
+                    slideToPrevItem('drag');
                 }
             }
             else {
@@ -645,7 +644,7 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
                     -mainCarouselWrapperRef.current.scrollTop,
                 ];
             }
-            if (carouselSlideAxis === "x") {
+            if (carouselSlideAxis === 'x') {
                 return [spring.val.get(), spring.val.get()];
             }
             return [spring.val.get(), spring.val.get()];
@@ -653,13 +652,13 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
     });
     function getWrapperOverflowStyles() {
         if (freeScroll) {
-            if (carouselSlideAxis === "x") {
+            if (carouselSlideAxis === 'x') {
                 return {
-                    overflowX: "auto",
+                    overflowX: 'auto',
                 };
             }
             return {
-                overflowY: "auto",
+                overflowY: 'auto',
             };
         }
         return {};
@@ -667,17 +666,17 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
     function setStartEndItemReachedOnFreeScroll() {
         if (mainCarouselWrapperRef.current) {
             prevSlidedValue.current =
-                mainCarouselWrapperRef.current[carouselSlideAxis === "x" ? "scrollLeft" : "scrollTop"];
-            if (mainCarouselWrapperRef.current[carouselSlideAxis === "x" ? "scrollLeft" : "scrollTop"] === 0) {
+                mainCarouselWrapperRef.current[carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'];
+            if (mainCarouselWrapperRef.current[carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'] === 0) {
                 firstItemReached.current = true;
                 lastItemReached.current = false;
             }
-            if (mainCarouselWrapperRef.current[carouselSlideAxis === "x" ? "scrollLeft" : "scrollTop"] > 0 &&
-                mainCarouselWrapperRef.current[carouselSlideAxis === "x" ? "scrollLeft" : "scrollTop"] < getTotalScrollValue()) {
+            if (mainCarouselWrapperRef.current[carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'] > 0 &&
+                mainCarouselWrapperRef.current[carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'] < getTotalScrollValue()) {
                 firstItemReached.current = false;
                 lastItemReached.current = false;
             }
-            if (mainCarouselWrapperRef.current[carouselSlideAxis === "x" ? "scrollLeft" : "scrollTop"] === getTotalScrollValue()) {
+            if (mainCarouselWrapperRef.current[carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'] === getTotalScrollValue()) {
                 firstItemReached.current = false;
                 lastItemReached.current = true;
             }
@@ -695,12 +694,12 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
         return {};
     }
     function findItemIndex(id) {
-        return items.findIndex((item) => item.id === id);
+        return items.findIndex(item => item.id === id);
     }
     function findItemIndexById(id, error) {
         let itemIndex = 0;
-        if (typeof id === "string") {
-            itemIndex = items.findIndex((_item) => _item.id === id);
+        if (typeof id === 'string') {
+            itemIndex = items.findIndex(_item => _item.id === id);
         }
         else {
             itemIndex = id;
@@ -722,10 +721,10 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
         const currentItem = findItemIndex(items[activeItem.current].id);
         const newActiveItem = findItemIndex(items[itemIndex].id);
         if (newActiveItem > currentItem) {
-            slideToNextItem("click", newActiveItem);
+            slideToNextItem('click', newActiveItem);
         }
         else {
-            slideToPrevItem("click", newActiveItem);
+            slideToPrevItem('click', newActiveItem);
         }
     }
     function getIsNextItem(id) {
@@ -744,8 +743,8 @@ function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = "
         }
         return itemIndex === _activeItem - 1;
     }
-    const carouselFragment = (jsxRuntime.jsx("div", Object.assign({ ref: mainCarouselWrapperRef }, getScrollHandlers(), { style: Object.assign({ display: "flex", position: "relative", width: "100%", height: "100%" }, getWrapperOverflowStyles()) }, { children: jsxRuntime.jsx("div", Object.assign({ ref: carouselTrackWrapperRef }, bindDrag(), { style: Object.assign({ position: "relative", display: "flex", flexDirection: carouselSlideAxis === "x" ? "row" : "column", touchAction: "none" }, getAnimatedWrapperStyles()) }, { children: internalItems.map((item, index) => {
-                return (jsxRuntime.jsx("div", Object.assign({ className: "use-spring-carousel-item", "data-testid": "use-spring-carousel-item-wrapper", style: Object.assign({ display: "flex", position: "relative", flex: "1" }, getItemStyles()) }, { children: item.renderItem }), `${item.id}-${index}`));
+    const carouselFragment = (jsxRuntime.jsx("div", Object.assign({ ref: mainCarouselWrapperRef }, getScrollHandlers(), { style: Object.assign({ display: 'flex', position: 'relative', width: '100%', height: '100%' }, getWrapperOverflowStyles()) }, { children: jsxRuntime.jsx("div", Object.assign({ ref: carouselTrackWrapperRef }, bindDrag(), { style: Object.assign({ position: 'relative', display: 'flex', flexDirection: carouselSlideAxis === 'x' ? 'row' : 'column', touchAction: 'none' }, getAnimatedWrapperStyles()) }, { children: internalItems.map((item, index) => {
+                return (jsxRuntime.jsx("div", Object.assign({ className: "use-spring-carousel-item", "data-testid": "use-spring-carousel-item-wrapper", style: Object.assign({ display: 'flex', position: 'relative', flex: '1' }, getItemStyles()) }, { children: item.renderItem }), `${item.id}-${index}`));
             }) })) })));
     return {
         useListenToCustomEvent,
@@ -769,7 +768,7 @@ const Context = react.createContext(undefined);
 function useSpringCarouselContext() {
     const context = react.useContext(Context);
     if (!context) {
-        throw new Error("useSpringCarouselContext must be used within the carousel.");
+        throw new Error('useSpringCarouselContext must be used within the carousel.');
     }
     return context;
 }