glide-react 1.0.0 → 2.0.0

package/dist/index.d.mts

@@ -340,6 +340,8 @@ interface ArrowProps {
     infinite: boolean;
     /** Center mode enabled */
     centerMode: boolean;
+    /** Vertical mode enabled */
+    vertical: boolean;
     /** Click handler */
     onClick: () => void;
     /** Custom arrow element */

package/dist/index.d.ts

@@ -340,6 +340,8 @@ interface ArrowProps {
     infinite: boolean;
     /** Center mode enabled */
     centerMode: boolean;
+    /** Vertical mode enabled */
+    vertical: boolean;
     /** Click handler */
     onClick: () => void;
     /** Custom arrow element */

package/dist/index.js

@@ -552,10 +552,12 @@ var calculateSlideWidth = (listWidth, slidesToShow, centerMode, centerPadding, v
   let centerPaddingAdj = 0;
   if (centerMode) {
     const paddingValue = parseInt(centerPadding, 10) || 0;
-    centerPaddingAdj = paddingValue * 2;
     if (centerPadding.endsWith("%")) {
-      centerPaddingAdj = listWidth * paddingValue * 2 / 100;
+      centerPaddingAdj = listWidth * paddingValue / 100;
+    } else {
+      centerPaddingAdj = paddingValue;
     }
+    centerPaddingAdj = centerPaddingAdj * 2;
   }
   return Math.ceil((listWidth - centerPaddingAdj) / slidesToShow);
 };
@@ -640,6 +642,9 @@ var getSlideStyle = (spec) => {
   if (!spec.variableWidth) {
     style.width = spec.slideWidth;
   }
+  if (spec.vertical && spec.slideHeight) {
+    style.height = spec.slideHeight;
+  }
   if (spec.fade) {
     style.position = "relative";
     if (spec.vertical) {
@@ -648,7 +653,7 @@ var getSlideStyle = (spec) => {
       style.left = -spec.index * spec.slideWidth;
     }
     style.opacity = spec.currentSlide === spec.index ? 1 : 0;
-    style.zIndex = spec.currentSlide === spec.index ? 999 : 998;
+    style.zIndex = spec.currentSlide === spec.index ? 1 : 0;
     if (spec.useCSS) {
       style.transition = `opacity ${spec.speed}ms ${spec.cssEase}, visibility ${spec.speed}ms ${spec.cssEase}`;
     }
@@ -904,7 +909,7 @@ var Track = (0, import_react.forwardRef)(function Track2({
   const baseTrackStyle = {
     position: "relative",
     display: fade ? "block" : "flex",
-    flexDirection: vertical ? "column" : "row",
+    ...fade ? {} : { flexDirection: vertical ? "column" : "row" },
     ...trackStyle
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -924,7 +929,7 @@ var Track = (0, import_react.forwardRef)(function Track2({
 // src/components/Arrows.tsx
 var import_react2 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var PrevArrowSVG = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+var PrevArrowSVG = ({ className, vertical }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
   "svg",
   {
     className,
@@ -939,7 +944,7 @@ var PrevArrowSVG = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime2.js
     children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polyline", { points: "15 18 9 12 15 6" })
   }
 );
-var NextArrowSVG = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+var NextArrowSVG = ({ className, vertical }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
   "svg",
   {
     className,
@@ -956,9 +961,7 @@ var NextArrowSVG = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime2.js
 );
 var baseArrowStyle = {
   position: "absolute",
-  top: "50%",
-  transform: "translateY(-50%)",
-  zIndex: 10,
+  zIndex: 100,
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
@@ -983,6 +986,7 @@ var PrevArrow = ({
   slidesToShow,
   infinite,
   centerMode,
+  vertical,
   onClick,
   customArrow
 }) => {
@@ -1014,13 +1018,15 @@ var PrevArrow = ({
       className: `glide-arrow glide-prev ${!canGo ? "glide-disabled" : ""}`,
       style: {
         ...canGo ? baseArrowStyle : disabledArrowStyle,
-        left: 10
+        left: 10,
+        top: "50%",
+        transform: "translateY(-50%)"
       },
       onClick: handleClick,
       "aria-label": "Previous slide",
       "aria-disabled": !canGo,
       disabled: !canGo,
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PrevArrowSVG, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PrevArrowSVG, { vertical })
     }
   );
 };
@@ -1030,6 +1036,7 @@ var NextArrow = ({
   slidesToShow,
   infinite,
   centerMode,
+  vertical,
   onClick,
   customArrow
 }) => {
@@ -1064,13 +1071,15 @@ var NextArrow = ({
       className: `glide-arrow glide-next ${!canGo ? "glide-disabled" : ""}`,
       style: {
         ...canGo ? baseArrowStyle : disabledArrowStyle,
-        right: 10
+        right: 10,
+        top: "50%",
+        transform: "translateY(-50%)"
       },
       onClick: handleClick,
       "aria-label": "Next slide",
       "aria-disabled": !canGo,
       disabled: !canGo,
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(NextArrowSVG, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(NextArrowSVG, { vertical })
     }
   );
 };
@@ -1493,6 +1502,95 @@ var Glide = (0, import_react5.forwardRef)(function Glide2(props, ref) {
     scrolling
   } = state;
   const slideCount = import_react5.Children.count(children);
+  const [breakpoint, setBreakpoint] = import_react5.default.useState(null);
+  (0, import_react5.useEffect)(() => {
+    if (!canUseDOM() || !settings.responsive) return;
+    const responsiveSettings2 = settings.responsive;
+    const breakpoints = responsiveSettings2.map((bp) => bp.breakpoint).sort((a, b) => a - b);
+    const mediaQueryListeners = [];
+    breakpoints.forEach((bp, index) => {
+      let query;
+      if (index === 0) {
+        query = `(max-width: ${bp}px)`;
+      } else {
+        query = `(min-width: ${breakpoints[index - 1] + 1}px) and (max-width: ${bp}px)`;
+      }
+      const mql = window.matchMedia(query);
+      const listener = (e) => {
+        if (e.matches) {
+          setBreakpoint(bp);
+        }
+      };
+      mql.addEventListener("change", listener);
+      mediaQueryListeners.push({ mql, listener });
+      if (mql.matches) {
+        setBreakpoint(bp);
+      }
+    });
+    const maxBreakpoint = breakpoints[breakpoints.length - 1];
+    const fullScreenQuery = `(min-width: ${maxBreakpoint + 1}px)`;
+    const fullScreenMql = window.matchMedia(fullScreenQuery);
+    const fullScreenListener = (e) => {
+      if (e.matches) {
+        setBreakpoint(null);
+      }
+    };
+    fullScreenMql.addEventListener("change", fullScreenListener);
+    mediaQueryListeners.push({ mql: fullScreenMql, listener: fullScreenListener });
+    if (fullScreenMql.matches) {
+      setBreakpoint(null);
+    }
+    return () => {
+      mediaQueryListeners.forEach(({ mql, listener }) => {
+        mql.removeEventListener("change", listener);
+      });
+    };
+  }, [settings.responsive]);
+  const responsiveSettings = (0, import_react5.useMemo)(() => {
+    let merged;
+    if (!breakpoint || !settings.responsive) {
+      merged = settings;
+    } else {
+      const matchedBreakpoint = settings.responsive.find((bp) => bp.breakpoint === breakpoint);
+      if (!matchedBreakpoint) {
+        merged = settings;
+      } else if (matchedBreakpoint.settings === "disabled") {
+        merged = { ...settings, slidesToShow: 1, slidesToScroll: 1 };
+      } else {
+        merged = { ...settings, ...matchedBreakpoint.settings };
+      }
+    }
+    if (merged.centerMode && merged.slidesToScroll > 1) {
+      if (process.env.NODE_ENV !== "production") {
+        console.warn(
+          `slidesToScroll should be equal to 1 in centerMode, you are using ${merged.slidesToScroll}`
+        );
+      }
+      merged = { ...merged, slidesToScroll: 1 };
+    }
+    if (merged.fade) {
+      if (merged.slidesToShow > 1 && process.env.NODE_ENV !== "production") {
+        console.warn(
+          `slidesToShow should be equal to 1 when fade is true, you're using ${merged.slidesToShow}`
+        );
+      }
+      if (merged.slidesToScroll > 1 && process.env.NODE_ENV !== "production") {
+        console.warn(
+          `slidesToScroll should be equal to 1 when fade is true, you're using ${merged.slidesToScroll}`
+        );
+      }
+      merged = { ...merged, slidesToShow: 1, slidesToScroll: 1 };
+    }
+    return merged;
+  }, [breakpoint, settings]);
+  const {
+    slidesToShow: responsiveSlidesToShow,
+    slidesToScroll: responsiveSlidesToScroll,
+    infinite: responsiveInfinite,
+    centerMode: responsiveCenterMode,
+    dots: responsiveDots,
+    arrows: responsiveArrows
+  } = responsiveSettings;
   const {
     slideWidth: calculatedSlideWidth,
     trackStyle,
@@ -1504,10 +1602,10 @@ var Glide = (0, import_react5.forwardRef)(function Glide2(props, ref) {
   } = useTrack({
     currentSlide,
     slideCount,
-    slidesToShow,
-    slidesToScroll,
-    infinite,
-    centerMode,
+    slidesToShow: responsiveSlidesToShow,
+    slidesToScroll: responsiveSlidesToScroll,
+    infinite: responsiveInfinite,
+    centerMode: responsiveCenterMode,
     centerPadding,
     listWidth: listWidth || 0,
     listHeight: listHeight || 0,
@@ -1525,47 +1623,53 @@ var Glide = (0, import_react5.forwardRef)(function Glide2(props, ref) {
     swipeLeft
   });
   (0, import_react5.useEffect)(() => {
-    if (!canUseDOM() || !listRef.current) return;
-    const updateDimensions = () => {
+    if (!canUseDOM()) return;
+    const timeoutId = setTimeout(() => {
       if (!listRef.current) return;
-      const newListWidth = getWidth(listRef.current);
-      const newListHeight = getHeight(listRef.current);
-      const firstSlide = listRef.current.querySelector('[data-index="0"]');
-      const newSlideHeight = firstSlide ? getHeight(firstSlide) : null;
-      dispatch({
-        type: "INIT",
-        payload: {
-          listWidth: newListWidth,
-          listHeight: newListHeight,
-          slideHeight: newSlideHeight,
-          slideCount
-        }
-      });
-    };
-    updateDimensions();
-    resizeObserverRef.current = new ResizeObserver(updateDimensions);
-    resizeObserverRef.current.observe(listRef.current);
-    onInit?.();
+      const updateDimensions = () => {
+        if (!listRef.current) return;
+        const newListWidth = getWidth(listRef.current);
+        const firstSlide = listRef.current.querySelector('[data-index="0"]');
+        const newSlideHeight = firstSlide ? getHeight(firstSlide) : null;
+        const newListHeight = newSlideHeight ? newSlideHeight * responsiveSlidesToShow : null;
+        dispatch({
+          type: "INIT",
+          payload: {
+            listWidth: newListWidth,
+            listHeight: newListHeight,
+            slideHeight: newSlideHeight,
+            slideCount
+          }
+        });
+      };
+      updateDimensions();
+      if (!resizeObserverRef.current && listRef.current) {
+        resizeObserverRef.current = new ResizeObserver(updateDimensions);
+        resizeObserverRef.current.observe(listRef.current);
+      }
+      if (!initialized) {
+        onInit?.();
+      }
+    }, 0);
     return () => {
+      clearTimeout(timeoutId);
       resizeObserverRef.current?.disconnect();
+      resizeObserverRef.current = null;
     };
-  }, [slideCount, onInit]);
-  const autoplayIterator = (0, import_react5.useCallback)(() => {
-    if (autoplaying !== "playing") return;
-    const nextSlideIndex = currentSlide + slidesToScroll;
-    goToSlide(nextSlideIndex);
-  }, [autoplaying, currentSlide, slidesToScroll]);
+  }, [slideCount, initialized, onInit, responsiveSlidesToShow]);
   (0, import_react5.useEffect)(() => {
-    if (!autoplay || !initialized) return;
-    if (autoplaying === "playing") {
-      autoplayTimerRef.current = setTimeout(autoplayIterator, autoplaySpeed);
-    }
-    return () => {
-      if (autoplayTimerRef.current) {
-        clearTimeout(autoplayTimerRef.current);
+    if (!initialized || !canUseDOM()) return;
+    if (currentSlide >= slideCount) {
+      const newSlide = Math.max(0, slideCount - responsiveSlidesToShow);
+      if (newSlide !== currentSlide) {
+        dispatch({
+          type: "GO_TO_SLIDE",
+          payload: { slide: newSlide, animated: false }
+        });
       }
-    };
-  }, [autoplay, autoplaying, initialized, autoplayIterator, autoplaySpeed]);
+    }
+    onReInit?.();
+  }, [responsiveSlidesToShow, responsiveSlidesToScroll, responsiveInfinite, responsiveCenterMode, initialized, slideCount, currentSlide, onReInit]);
   (0, import_react5.useEffect)(() => {
     if (animating) {
       animationEndTimeoutRef.current = setTimeout(() => {
@@ -1583,21 +1687,21 @@ var Glide = (0, import_react5.forwardRef)(function Glide2(props, ref) {
     (slideIndex, dontAnimate = false) => {
       if (waitForAnimate && animating) return;
       let targetIndex = slideIndex;
-      if (infinite) {
+      if (responsiveInfinite) {
         if (targetIndex < 0) {
           targetIndex = slideCount + targetIndex;
         } else if (targetIndex >= slideCount) {
           targetIndex = targetIndex - slideCount;
         }
       } else {
-        targetIndex = clamp(targetIndex, 0, slideCount - slidesToShow);
+        targetIndex = clamp(targetIndex, 0, slideCount - responsiveSlidesToShow);
       }
       beforeChange?.(currentSlide, targetIndex);
       if (lazyLoad) {
         const slidesToLoad = getOnDemandLazySlides({
           currentSlide: targetIndex,
-          centerMode,
-          slidesToShow,
+          centerMode: responsiveCenterMode,
+          slidesToShow: responsiveSlidesToShow,
           centerPadding,
           lazyLoadedList
         });
@@ -1616,23 +1720,23 @@ var Glide = (0, import_react5.forwardRef)(function Glide2(props, ref) {
     [
       waitForAnimate,
       animating,
-      infinite,
+      responsiveInfinite,
       slideCount,
-      slidesToShow,
+      responsiveSlidesToShow,
       beforeChange,
       currentSlide,
       lazyLoad,
-      centerMode,
+      responsiveCenterMode,
       centerPadding,
       lazyLoadedList
     ]
   );
   const next = (0, import_react5.useCallback)(() => {
-    goToSlide(currentSlide + slidesToScroll);
-  }, [currentSlide, slidesToScroll, goToSlide]);
+    goToSlide(currentSlide + responsiveSlidesToScroll);
+  }, [currentSlide, responsiveSlidesToScroll, goToSlide]);
   const prev = (0, import_react5.useCallback)(() => {
-    goToSlide(currentSlide - slidesToScroll);
-  }, [currentSlide, slidesToScroll, goToSlide]);
+    goToSlide(currentSlide - responsiveSlidesToScroll);
+  }, [currentSlide, responsiveSlidesToScroll, goToSlide]);
   const goTo = (0, import_react5.useCallback)(
     (index, dontAnimate = false) => {
       goToSlide(index, dontAnimate);
@@ -1645,6 +1749,29 @@ var Glide = (0, import_react5.forwardRef)(function Glide2(props, ref) {
   const play = (0, import_react5.useCallback)(() => {
     dispatch({ type: "SET_AUTOPLAY", payload: "playing" });
   }, []);
+  const autoplayTick = (0, import_react5.useCallback)(() => {
+    const nextSlideIndex = currentSlide + responsiveSlidesToScroll;
+    goToSlide(nextSlideIndex);
+  }, [currentSlide, responsiveSlidesToScroll, goToSlide]);
+  (0, import_react5.useEffect)(() => {
+    if (!autoplay || !initialized) return;
+    if (autoplaying === "playing") {
+      if (autoplayTimerRef.current) {
+        clearInterval(autoplayTimerRef.current);
+      }
+      autoplayTimerRef.current = setInterval(autoplayTick, autoplaySpeed + 50);
+    } else {
+      if (autoplayTimerRef.current) {
+        clearInterval(autoplayTimerRef.current);
+        autoplayTimerRef.current = null;
+      }
+    }
+    return () => {
+      if (autoplayTimerRef.current) {
+        clearInterval(autoplayTimerRef.current);
+      }
+    };
+  }, [autoplay, autoplaying, initialized, autoplayTick, autoplaySpeed]);
   (0, import_react5.useImperativeHandle)(
     ref,
     () => ({
@@ -1694,16 +1821,16 @@ var Glide = (0, import_react5.forwardRef)(function Glide2(props, ref) {
         swiped,
         swiping,
         slideCount,
-        slidesToScroll,
-        infinite,
+        slidesToScroll: responsiveSlidesToScroll,
+        infinite: responsiveInfinite,
         touchObject,
         swipeEvent,
         listHeight: listHeight || 0,
         listWidth: listWidth || 0,
         slideWidth: calculatedSlideWidth,
         slideHeight: slideHeight || 0,
-        centerMode,
-        slidesToShow,
+        centerMode: responsiveCenterMode,
+        slidesToShow: responsiveSlidesToShow,
         fade,
         disabled,
         variableWidth,
@@ -1730,16 +1857,16 @@ var Glide = (0, import_react5.forwardRef)(function Glide2(props, ref) {
       swiped,
       swiping,
       slideCount,
-      slidesToScroll,
-      infinite,
+      responsiveSlidesToScroll,
+      responsiveInfinite,
       touchObject,
       swipeEvent,
       listHeight,
       listWidth,
       calculatedSlideWidth,
       slideHeight,
-      centerMode,
-      slidesToShow,
+      responsiveCenterMode,
+      responsiveSlidesToShow,
       fade,
       disabled,
       variableWidth,
@@ -1761,13 +1888,13 @@ var Glide = (0, import_react5.forwardRef)(function Glide2(props, ref) {
         onSwipe,
         targetSlide,
         currentSlide,
-        infinite,
+        infinite: responsiveInfinite,
         slideCount,
-        slidesToScroll,
-        slidesToShow,
+        slidesToScroll: responsiveSlidesToScroll,
+        slidesToShow: responsiveSlidesToShow,
         slideWidth: calculatedSlideWidth,
         slideHeight: slideHeight || 0,
-        centerMode,
+        centerMode: responsiveCenterMode,
         fade,
         disabled,
         variableWidth,
@@ -1808,13 +1935,13 @@ var Glide = (0, import_react5.forwardRef)(function Glide2(props, ref) {
       onSwipe,
       targetSlide,
       currentSlide,
-      infinite,
+      responsiveInfinite,
       slideCount,
-      slidesToScroll,
-      slidesToShow,
+      responsiveSlidesToScroll,
+      responsiveSlidesToShow,
       calculatedSlideWidth,
       slideHeight,
-      centerMode,
+      responsiveCenterMode,
       fade,
       disabled,
       variableWidth,
@@ -1881,23 +2008,33 @@ var Glide = (0, import_react5.forwardRef)(function Glide2(props, ref) {
     }),
     [vertical]
   );
-  const listStyle = (0, import_react5.useMemo)(
-    () => ({
+  const listStyle = (0, import_react5.useMemo)(() => {
+    const style = {
       position: "relative",
       display: "block",
       overflow: "hidden",
       margin: 0,
       padding: 0
-    }),
-    []
-  );
+    };
+    if (vertical && listHeight) {
+      style.height = listHeight;
+    }
+    if (responsiveCenterMode) {
+      if (vertical) {
+        style.padding = `${centerPadding} 0px`;
+      } else {
+        style.padding = `0px ${centerPadding}`;
+      }
+    }
+    return style;
+  }, [responsiveCenterMode, vertical, centerPadding, listHeight]);
   if (!initialized || !canUseDOM()) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `glide-slider ${className}`.trim(), style: sliderStyle, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "glide-list", style: listStyle, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "glide-track", style: { display: "flex" }, children: import_react5.default.Children.map(children, (child, idx) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `glide-slider ${className}`.trim(), style: sliderStyle, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref: listRef, className: "glide-list", style: listStyle, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "glide-track", style: { display: "flex" }, children: import_react5.default.Children.map(children, (child, idx) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "div",
       {
         className: "glide-slide",
         style: {
-          width: `${100 / slidesToShow}%`,
+          width: `${100 / responsiveSlidesToShow}%`,
           flexShrink: 0
         },
         children: child
@@ -1915,14 +2052,15 @@ var Glide = (0, import_react5.forwardRef)(function Glide2(props, ref) {
       onFocus: handleFocus,
       onBlur: handleBlur,
       children: [
-        arrows && !disabled && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        responsiveArrows && !disabled && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           PrevArrow,
           {
             currentSlide,
             slideCount,
-            slidesToShow,
-            infinite,
-            centerMode,
+            slidesToShow: responsiveSlidesToShow,
+            infinite: responsiveInfinite,
+            centerMode: responsiveCenterMode,
+            vertical,
             onClick: prev,
             customArrow: prevArrow
           }
@@ -1952,10 +2090,10 @@ var Glide = (0, import_react5.forwardRef)(function Glide2(props, ref) {
                 slideCount,
                 currentSlide,
                 targetSlide,
-                slidesToShow,
-                slidesToScroll,
-                infinite,
-                centerMode,
+                slidesToShow: responsiveSlidesToShow,
+                slidesToScroll: responsiveSlidesToScroll,
+                infinite: responsiveInfinite,
+                centerMode: responsiveCenterMode,
                 centerPadding,
                 fade,
                 vertical,
@@ -1974,26 +2112,27 @@ var Glide = (0, import_react5.forwardRef)(function Glide2(props, ref) {
             )
           }
         ),
-        arrows && !disabled && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        responsiveArrows && !disabled && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           NextArrow,
           {
             currentSlide,
             slideCount,
-            slidesToShow,
-            infinite,
-            centerMode,
+            slidesToShow: responsiveSlidesToShow,
+            infinite: responsiveInfinite,
+            centerMode: responsiveCenterMode,
+            vertical,
             onClick: next,
             customArrow: nextArrow
           }
         ),
-        dots && !disabled && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        responsiveDots && !disabled && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           Dots,
           {
             slideCount,
-            slidesToScroll,
-            slidesToShow,
+            slidesToScroll: responsiveSlidesToScroll,
+            slidesToShow: responsiveSlidesToShow,
             currentSlide,
-            infinite,
+            infinite: responsiveInfinite,
             onDotClick: handleDotClick,
             customPaging,
             appendDots,

package/dist/index.mjs

@@ -503,10 +503,12 @@ var calculateSlideWidth = (listWidth, slidesToShow, centerMode, centerPadding, v
   let centerPaddingAdj = 0;
   if (centerMode) {
     const paddingValue = parseInt(centerPadding, 10) || 0;
-    centerPaddingAdj = paddingValue * 2;
     if (centerPadding.endsWith("%")) {
-      centerPaddingAdj = listWidth * paddingValue * 2 / 100;
+      centerPaddingAdj = listWidth * paddingValue / 100;
+    } else {
+      centerPaddingAdj = paddingValue;
     }
+    centerPaddingAdj = centerPaddingAdj * 2;
   }
   return Math.ceil((listWidth - centerPaddingAdj) / slidesToShow);
 };
@@ -591,6 +593,9 @@ var getSlideStyle = (spec) => {
   if (!spec.variableWidth) {
     style.width = spec.slideWidth;
   }
+  if (spec.vertical && spec.slideHeight) {
+    style.height = spec.slideHeight;
+  }
   if (spec.fade) {
     style.position = "relative";
     if (spec.vertical) {
@@ -599,7 +604,7 @@ var getSlideStyle = (spec) => {
       style.left = -spec.index * spec.slideWidth;
     }
     style.opacity = spec.currentSlide === spec.index ? 1 : 0;
-    style.zIndex = spec.currentSlide === spec.index ? 999 : 998;
+    style.zIndex = spec.currentSlide === spec.index ? 1 : 0;
     if (spec.useCSS) {
       style.transition = `opacity ${spec.speed}ms ${spec.cssEase}, visibility ${spec.speed}ms ${spec.cssEase}`;
     }
@@ -855,7 +860,7 @@ var Track = forwardRef(function Track2({
   const baseTrackStyle = {
     position: "relative",
     display: fade ? "block" : "flex",
-    flexDirection: vertical ? "column" : "row",
+    ...fade ? {} : { flexDirection: vertical ? "column" : "row" },
     ...trackStyle
   };
   return /* @__PURE__ */ jsx(
@@ -875,7 +880,7 @@ var Track = forwardRef(function Track2({
 // src/components/Arrows.tsx
 import { cloneElement as cloneElement2, isValidElement as isValidElement2 } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
-var PrevArrowSVG = ({ className }) => /* @__PURE__ */ jsx2(
+var PrevArrowSVG = ({ className, vertical }) => /* @__PURE__ */ jsx2(
   "svg",
   {
     className,
@@ -890,7 +895,7 @@ var PrevArrowSVG = ({ className }) => /* @__PURE__ */ jsx2(
     children: /* @__PURE__ */ jsx2("polyline", { points: "15 18 9 12 15 6" })
   }
 );
-var NextArrowSVG = ({ className }) => /* @__PURE__ */ jsx2(
+var NextArrowSVG = ({ className, vertical }) => /* @__PURE__ */ jsx2(
   "svg",
   {
     className,
@@ -907,9 +912,7 @@ var NextArrowSVG = ({ className }) => /* @__PURE__ */ jsx2(
 );
 var baseArrowStyle = {
   position: "absolute",
-  top: "50%",
-  transform: "translateY(-50%)",
-  zIndex: 10,
+  zIndex: 100,
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
@@ -934,6 +937,7 @@ var PrevArrow = ({
   slidesToShow,
   infinite,
   centerMode,
+  vertical,
   onClick,
   customArrow
 }) => {
@@ -965,13 +969,15 @@ var PrevArrow = ({
       className: `glide-arrow glide-prev ${!canGo ? "glide-disabled" : ""}`,
       style: {
         ...canGo ? baseArrowStyle : disabledArrowStyle,
-        left: 10
+        left: 10,
+        top: "50%",
+        transform: "translateY(-50%)"
       },
       onClick: handleClick,
       "aria-label": "Previous slide",
       "aria-disabled": !canGo,
       disabled: !canGo,
-      children: /* @__PURE__ */ jsx2(PrevArrowSVG, {})
+      children: /* @__PURE__ */ jsx2(PrevArrowSVG, { vertical })
     }
   );
 };
@@ -981,6 +987,7 @@ var NextArrow = ({
   slidesToShow,
   infinite,
   centerMode,
+  vertical,
   onClick,
   customArrow
 }) => {
@@ -1015,13 +1022,15 @@ var NextArrow = ({
       className: `glide-arrow glide-next ${!canGo ? "glide-disabled" : ""}`,
       style: {
         ...canGo ? baseArrowStyle : disabledArrowStyle,
-        right: 10
+        right: 10,
+        top: "50%",
+        transform: "translateY(-50%)"
       },
       onClick: handleClick,
       "aria-label": "Next slide",
       "aria-disabled": !canGo,
       disabled: !canGo,
-      children: /* @__PURE__ */ jsx2(NextArrowSVG, {})
+      children: /* @__PURE__ */ jsx2(NextArrowSVG, { vertical })
     }
   );
 };
@@ -1444,6 +1453,95 @@ var Glide = forwardRef2(function Glide2(props, ref) {
     scrolling
   } = state;
   const slideCount = Children2.count(children);
+  const [breakpoint, setBreakpoint] = React4.useState(null);
+  useEffect(() => {
+    if (!canUseDOM() || !settings.responsive) return;
+    const responsiveSettings2 = settings.responsive;
+    const breakpoints = responsiveSettings2.map((bp) => bp.breakpoint).sort((a, b) => a - b);
+    const mediaQueryListeners = [];
+    breakpoints.forEach((bp, index) => {
+      let query;
+      if (index === 0) {
+        query = `(max-width: ${bp}px)`;
+      } else {
+        query = `(min-width: ${breakpoints[index - 1] + 1}px) and (max-width: ${bp}px)`;
+      }
+      const mql = window.matchMedia(query);
+      const listener = (e) => {
+        if (e.matches) {
+          setBreakpoint(bp);
+        }
+      };
+      mql.addEventListener("change", listener);
+      mediaQueryListeners.push({ mql, listener });
+      if (mql.matches) {
+        setBreakpoint(bp);
+      }
+    });
+    const maxBreakpoint = breakpoints[breakpoints.length - 1];
+    const fullScreenQuery = `(min-width: ${maxBreakpoint + 1}px)`;
+    const fullScreenMql = window.matchMedia(fullScreenQuery);
+    const fullScreenListener = (e) => {
+      if (e.matches) {
+        setBreakpoint(null);
+      }
+    };
+    fullScreenMql.addEventListener("change", fullScreenListener);
+    mediaQueryListeners.push({ mql: fullScreenMql, listener: fullScreenListener });
+    if (fullScreenMql.matches) {
+      setBreakpoint(null);
+    }
+    return () => {
+      mediaQueryListeners.forEach(({ mql, listener }) => {
+        mql.removeEventListener("change", listener);
+      });
+    };
+  }, [settings.responsive]);
+  const responsiveSettings = useMemo4(() => {
+    let merged;
+    if (!breakpoint || !settings.responsive) {
+      merged = settings;
+    } else {
+      const matchedBreakpoint = settings.responsive.find((bp) => bp.breakpoint === breakpoint);
+      if (!matchedBreakpoint) {
+        merged = settings;
+      } else if (matchedBreakpoint.settings === "disabled") {
+        merged = { ...settings, slidesToShow: 1, slidesToScroll: 1 };
+      } else {
+        merged = { ...settings, ...matchedBreakpoint.settings };
+      }
+    }
+    if (merged.centerMode && merged.slidesToScroll > 1) {
+      if (process.env.NODE_ENV !== "production") {
+        console.warn(
+          `slidesToScroll should be equal to 1 in centerMode, you are using ${merged.slidesToScroll}`
+        );
+      }
+      merged = { ...merged, slidesToScroll: 1 };
+    }
+    if (merged.fade) {
+      if (merged.slidesToShow > 1 && process.env.NODE_ENV !== "production") {
+        console.warn(
+          `slidesToShow should be equal to 1 when fade is true, you're using ${merged.slidesToShow}`
+        );
+      }
+      if (merged.slidesToScroll > 1 && process.env.NODE_ENV !== "production") {
+        console.warn(
+          `slidesToScroll should be equal to 1 when fade is true, you're using ${merged.slidesToScroll}`
+        );
+      }
+      merged = { ...merged, slidesToShow: 1, slidesToScroll: 1 };
+    }
+    return merged;
+  }, [breakpoint, settings]);
+  const {
+    slidesToShow: responsiveSlidesToShow,
+    slidesToScroll: responsiveSlidesToScroll,
+    infinite: responsiveInfinite,
+    centerMode: responsiveCenterMode,
+    dots: responsiveDots,
+    arrows: responsiveArrows
+  } = responsiveSettings;
   const {
     slideWidth: calculatedSlideWidth,
     trackStyle,
@@ -1455,10 +1553,10 @@ var Glide = forwardRef2(function Glide2(props, ref) {
   } = useTrack({
     currentSlide,
     slideCount,
-    slidesToShow,
-    slidesToScroll,
-    infinite,
-    centerMode,
+    slidesToShow: responsiveSlidesToShow,
+    slidesToScroll: responsiveSlidesToScroll,
+    infinite: responsiveInfinite,
+    centerMode: responsiveCenterMode,
     centerPadding,
     listWidth: listWidth || 0,
     listHeight: listHeight || 0,
@@ -1476,47 +1574,53 @@ var Glide = forwardRef2(function Glide2(props, ref) {
     swipeLeft
   });
   useEffect(() => {
-    if (!canUseDOM() || !listRef.current) return;
-    const updateDimensions = () => {
+    if (!canUseDOM()) return;
+    const timeoutId = setTimeout(() => {
       if (!listRef.current) return;
-      const newListWidth = getWidth(listRef.current);
-      const newListHeight = getHeight(listRef.current);
-      const firstSlide = listRef.current.querySelector('[data-index="0"]');
-      const newSlideHeight = firstSlide ? getHeight(firstSlide) : null;
-      dispatch({
-        type: "INIT",
-        payload: {
-          listWidth: newListWidth,
-          listHeight: newListHeight,
-          slideHeight: newSlideHeight,
-          slideCount
-        }
-      });
-    };
-    updateDimensions();
-    resizeObserverRef.current = new ResizeObserver(updateDimensions);
-    resizeObserverRef.current.observe(listRef.current);
-    onInit?.();
+      const updateDimensions = () => {
+        if (!listRef.current) return;
+        const newListWidth = getWidth(listRef.current);
+        const firstSlide = listRef.current.querySelector('[data-index="0"]');
+        const newSlideHeight = firstSlide ? getHeight(firstSlide) : null;
+        const newListHeight = newSlideHeight ? newSlideHeight * responsiveSlidesToShow : null;
+        dispatch({
+          type: "INIT",
+          payload: {
+            listWidth: newListWidth,
+            listHeight: newListHeight,
+            slideHeight: newSlideHeight,
+            slideCount
+          }
+        });
+      };
+      updateDimensions();
+      if (!resizeObserverRef.current && listRef.current) {
+        resizeObserverRef.current = new ResizeObserver(updateDimensions);
+        resizeObserverRef.current.observe(listRef.current);
+      }
+      if (!initialized) {
+        onInit?.();
+      }
+    }, 0);
     return () => {
+      clearTimeout(timeoutId);
       resizeObserverRef.current?.disconnect();
+      resizeObserverRef.current = null;
     };
-  }, [slideCount, onInit]);
-  const autoplayIterator = useCallback3(() => {
-    if (autoplaying !== "playing") return;
-    const nextSlideIndex = currentSlide + slidesToScroll;
-    goToSlide(nextSlideIndex);
-  }, [autoplaying, currentSlide, slidesToScroll]);
+  }, [slideCount, initialized, onInit, responsiveSlidesToShow]);
   useEffect(() => {
-    if (!autoplay || !initialized) return;
-    if (autoplaying === "playing") {
-      autoplayTimerRef.current = setTimeout(autoplayIterator, autoplaySpeed);
-    }
-    return () => {
-      if (autoplayTimerRef.current) {
-        clearTimeout(autoplayTimerRef.current);
+    if (!initialized || !canUseDOM()) return;
+    if (currentSlide >= slideCount) {
+      const newSlide = Math.max(0, slideCount - responsiveSlidesToShow);
+      if (newSlide !== currentSlide) {
+        dispatch({
+          type: "GO_TO_SLIDE",
+          payload: { slide: newSlide, animated: false }
+        });
       }
-    };
-  }, [autoplay, autoplaying, initialized, autoplayIterator, autoplaySpeed]);
+    }
+    onReInit?.();
+  }, [responsiveSlidesToShow, responsiveSlidesToScroll, responsiveInfinite, responsiveCenterMode, initialized, slideCount, currentSlide, onReInit]);
   useEffect(() => {
     if (animating) {
       animationEndTimeoutRef.current = setTimeout(() => {
@@ -1534,21 +1638,21 @@ var Glide = forwardRef2(function Glide2(props, ref) {
     (slideIndex, dontAnimate = false) => {
       if (waitForAnimate && animating) return;
       let targetIndex = slideIndex;
-      if (infinite) {
+      if (responsiveInfinite) {
         if (targetIndex < 0) {
           targetIndex = slideCount + targetIndex;
         } else if (targetIndex >= slideCount) {
           targetIndex = targetIndex - slideCount;
         }
       } else {
-        targetIndex = clamp(targetIndex, 0, slideCount - slidesToShow);
+        targetIndex = clamp(targetIndex, 0, slideCount - responsiveSlidesToShow);
       }
       beforeChange?.(currentSlide, targetIndex);
       if (lazyLoad) {
         const slidesToLoad = getOnDemandLazySlides({
           currentSlide: targetIndex,
-          centerMode,
-          slidesToShow,
+          centerMode: responsiveCenterMode,
+          slidesToShow: responsiveSlidesToShow,
           centerPadding,
           lazyLoadedList
         });
@@ -1567,23 +1671,23 @@ var Glide = forwardRef2(function Glide2(props, ref) {
     [
       waitForAnimate,
       animating,
-      infinite,
+      responsiveInfinite,
       slideCount,
-      slidesToShow,
+      responsiveSlidesToShow,
       beforeChange,
       currentSlide,
       lazyLoad,
-      centerMode,
+      responsiveCenterMode,
       centerPadding,
       lazyLoadedList
     ]
   );
   const next = useCallback3(() => {
-    goToSlide(currentSlide + slidesToScroll);
-  }, [currentSlide, slidesToScroll, goToSlide]);
+    goToSlide(currentSlide + responsiveSlidesToScroll);
+  }, [currentSlide, responsiveSlidesToScroll, goToSlide]);
   const prev = useCallback3(() => {
-    goToSlide(currentSlide - slidesToScroll);
-  }, [currentSlide, slidesToScroll, goToSlide]);
+    goToSlide(currentSlide - responsiveSlidesToScroll);
+  }, [currentSlide, responsiveSlidesToScroll, goToSlide]);
   const goTo = useCallback3(
     (index, dontAnimate = false) => {
       goToSlide(index, dontAnimate);
@@ -1596,6 +1700,29 @@ var Glide = forwardRef2(function Glide2(props, ref) {
   const play = useCallback3(() => {
     dispatch({ type: "SET_AUTOPLAY", payload: "playing" });
   }, []);
+  const autoplayTick = useCallback3(() => {
+    const nextSlideIndex = currentSlide + responsiveSlidesToScroll;
+    goToSlide(nextSlideIndex);
+  }, [currentSlide, responsiveSlidesToScroll, goToSlide]);
+  useEffect(() => {
+    if (!autoplay || !initialized) return;
+    if (autoplaying === "playing") {
+      if (autoplayTimerRef.current) {
+        clearInterval(autoplayTimerRef.current);
+      }
+      autoplayTimerRef.current = setInterval(autoplayTick, autoplaySpeed + 50);
+    } else {
+      if (autoplayTimerRef.current) {
+        clearInterval(autoplayTimerRef.current);
+        autoplayTimerRef.current = null;
+      }
+    }
+    return () => {
+      if (autoplayTimerRef.current) {
+        clearInterval(autoplayTimerRef.current);
+      }
+    };
+  }, [autoplay, autoplaying, initialized, autoplayTick, autoplaySpeed]);
   useImperativeHandle(
     ref,
     () => ({
@@ -1645,16 +1772,16 @@ var Glide = forwardRef2(function Glide2(props, ref) {
         swiped,
         swiping,
         slideCount,
-        slidesToScroll,
-        infinite,
+        slidesToScroll: responsiveSlidesToScroll,
+        infinite: responsiveInfinite,
         touchObject,
         swipeEvent,
         listHeight: listHeight || 0,
         listWidth: listWidth || 0,
         slideWidth: calculatedSlideWidth,
         slideHeight: slideHeight || 0,
-        centerMode,
-        slidesToShow,
+        centerMode: responsiveCenterMode,
+        slidesToShow: responsiveSlidesToShow,
         fade,
         disabled,
         variableWidth,
@@ -1681,16 +1808,16 @@ var Glide = forwardRef2(function Glide2(props, ref) {
       swiped,
       swiping,
       slideCount,
-      slidesToScroll,
-      infinite,
+      responsiveSlidesToScroll,
+      responsiveInfinite,
       touchObject,
       swipeEvent,
       listHeight,
       listWidth,
       calculatedSlideWidth,
       slideHeight,
-      centerMode,
-      slidesToShow,
+      responsiveCenterMode,
+      responsiveSlidesToShow,
       fade,
       disabled,
       variableWidth,
@@ -1712,13 +1839,13 @@ var Glide = forwardRef2(function Glide2(props, ref) {
         onSwipe,
         targetSlide,
         currentSlide,
-        infinite,
+        infinite: responsiveInfinite,
         slideCount,
-        slidesToScroll,
-        slidesToShow,
+        slidesToScroll: responsiveSlidesToScroll,
+        slidesToShow: responsiveSlidesToShow,
         slideWidth: calculatedSlideWidth,
         slideHeight: slideHeight || 0,
-        centerMode,
+        centerMode: responsiveCenterMode,
         fade,
         disabled,
         variableWidth,
@@ -1759,13 +1886,13 @@ var Glide = forwardRef2(function Glide2(props, ref) {
       onSwipe,
       targetSlide,
       currentSlide,
-      infinite,
+      responsiveInfinite,
       slideCount,
-      slidesToScroll,
-      slidesToShow,
+      responsiveSlidesToScroll,
+      responsiveSlidesToShow,
       calculatedSlideWidth,
       slideHeight,
-      centerMode,
+      responsiveCenterMode,
       fade,
       disabled,
       variableWidth,
@@ -1832,23 +1959,33 @@ var Glide = forwardRef2(function Glide2(props, ref) {
     }),
     [vertical]
   );
-  const listStyle = useMemo4(
-    () => ({
+  const listStyle = useMemo4(() => {
+    const style = {
       position: "relative",
       display: "block",
       overflow: "hidden",
       margin: 0,
       padding: 0
-    }),
-    []
-  );
+    };
+    if (vertical && listHeight) {
+      style.height = listHeight;
+    }
+    if (responsiveCenterMode) {
+      if (vertical) {
+        style.padding = `${centerPadding} 0px`;
+      } else {
+        style.padding = `0px ${centerPadding}`;
+      }
+    }
+    return style;
+  }, [responsiveCenterMode, vertical, centerPadding, listHeight]);
   if (!initialized || !canUseDOM()) {
-    return /* @__PURE__ */ jsx4("div", { className: `glide-slider ${className}`.trim(), style: sliderStyle, children: /* @__PURE__ */ jsx4("div", { className: "glide-list", style: listStyle, children: /* @__PURE__ */ jsx4("div", { className: "glide-track", style: { display: "flex" }, children: React4.Children.map(children, (child, idx) => /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ jsx4("div", { className: `glide-slider ${className}`.trim(), style: sliderStyle, children: /* @__PURE__ */ jsx4("div", { ref: listRef, className: "glide-list", style: listStyle, children: /* @__PURE__ */ jsx4("div", { className: "glide-track", style: { display: "flex" }, children: React4.Children.map(children, (child, idx) => /* @__PURE__ */ jsx4(
       "div",
       {
         className: "glide-slide",
         style: {
-          width: `${100 / slidesToShow}%`,
+          width: `${100 / responsiveSlidesToShow}%`,
           flexShrink: 0
         },
         children: child
@@ -1866,14 +2003,15 @@ var Glide = forwardRef2(function Glide2(props, ref) {
       onFocus: handleFocus,
       onBlur: handleBlur,
       children: [
-        arrows && !disabled && /* @__PURE__ */ jsx4(
+        responsiveArrows && !disabled && /* @__PURE__ */ jsx4(
           PrevArrow,
           {
             currentSlide,
             slideCount,
-            slidesToShow,
-            infinite,
-            centerMode,
+            slidesToShow: responsiveSlidesToShow,
+            infinite: responsiveInfinite,
+            centerMode: responsiveCenterMode,
+            vertical,
             onClick: prev,
             customArrow: prevArrow
           }
@@ -1903,10 +2041,10 @@ var Glide = forwardRef2(function Glide2(props, ref) {
                 slideCount,
                 currentSlide,
                 targetSlide,
-                slidesToShow,
-                slidesToScroll,
-                infinite,
-                centerMode,
+                slidesToShow: responsiveSlidesToShow,
+                slidesToScroll: responsiveSlidesToScroll,
+                infinite: responsiveInfinite,
+                centerMode: responsiveCenterMode,
                 centerPadding,
                 fade,
                 vertical,
@@ -1925,26 +2063,27 @@ var Glide = forwardRef2(function Glide2(props, ref) {
             )
           }
         ),
-        arrows && !disabled && /* @__PURE__ */ jsx4(
+        responsiveArrows && !disabled && /* @__PURE__ */ jsx4(
           NextArrow,
           {
             currentSlide,
             slideCount,
-            slidesToShow,
-            infinite,
-            centerMode,
+            slidesToShow: responsiveSlidesToShow,
+            infinite: responsiveInfinite,
+            centerMode: responsiveCenterMode,
+            vertical,
             onClick: next,
             customArrow: nextArrow
           }
         ),
-        dots && !disabled && /* @__PURE__ */ jsx4(
+        responsiveDots && !disabled && /* @__PURE__ */ jsx4(
           Dots,
           {
             slideCount,
-            slidesToScroll,
-            slidesToShow,
+            slidesToScroll: responsiveSlidesToScroll,
+            slidesToShow: responsiveSlidesToShow,
             currentSlide,
-            infinite,
+            infinite: responsiveInfinite,
             onDotClick: handleDotClick,
             customPaging,
             appendDots,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glide-react",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "A modern, minimalistic, lightweight React carousel component built with TypeScript",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -24,7 +24,9 @@
     "typecheck": "tsc --noEmit",
     "test": "jest",
     "test:watch": "jest --watch",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "docs:dev": "webpack serve --config webpack.config.docs.js --mode development",
+    "docs:build": "webpack --config webpack.config.docs.js --mode production"
   },
   "repository": {
     "type": "git",
@@ -54,6 +56,10 @@
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.23.0",
+    "@babel/preset-env": "^7.23.0",
+    "@babel/preset-react": "^7.23.0",
+    "@babel/preset-typescript": "^7.23.0",
     "@testing-library/jest-dom": "^6.4.0",
     "@testing-library/react": "^14.2.0",
     "@types/jest": "^29.5.12",
@@ -61,15 +67,23 @@
     "@types/react-dom": "^18.2.18",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
+    "babel-loader": "^9.1.3",
+    "css-loader": "^6.10.0",
     "eslint": "^8.56.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "html-webpack-plugin": "^5.6.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-syntax-highlighter": "^15.5.0",
+    "style-loader": "^3.3.4",
     "ts-jest": "^29.1.2",
     "tsup": "^8.0.1",
-    "typescript": "^5.3.3"
+    "typescript": "^5.3.3",
+    "webpack": "^5.90.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
   }
 }