diff --git a/docs/demos.tsx b/docs/demos.tsx
index 08d8677..2ef1d85 100644
--- a/docs/demos.tsx
+++ b/docs/demos.tsx
@@ -1,5 +1,6 @@
import * as React from "react";
+import DynamicDataGlider from "../examples/dynamicDataGlider";
import SingleItemGlider from "../examples/singleItemGlider";
import MultipleItemsGlider from "../examples/multipleItemsGlider";
import ResponsiveGlider from "../examples/responsiveGlider";
@@ -72,6 +73,10 @@ function Demos() {
Skip Track
+
+
Dynamic Data
+
+
);
}
diff --git a/examples/dynamicDataGlider.tsx b/examples/dynamicDataGlider.tsx
new file mode 100644
index 0000000..5be23be
--- /dev/null
+++ b/examples/dynamicDataGlider.tsx
@@ -0,0 +1,39 @@
+import * as React from "react";
+
+import Glider from "../src";
+
+function DynamicDataGlider() {
+ const [data, setData] = React.useState([1, 2, 3, 4, 5, 6]);
+
+ return (
+
+
{
+ const newData = [
+ ...new Array(Math.floor(Math.random() * 12) + 1),
+ ].map((_, index) => index + 1);
+ setData(newData);
+ }}
+ value="Randomize"
+ />
+
+
+ {data.map((n) => (
+
+ {n}
+
+ ))}
+
+
+
+ );
+}
+
+export default DynamicDataGlider;
diff --git a/src/index.tsx b/src/index.tsx
index 7c75c21..f7166ff 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -19,6 +19,7 @@ const makeGliderOptions: (
...restProps
}) => ({
...restProps,
+ skipTrack: true,
arrows:
(hasArrows && {
next: (arrows && arrows.next) || nextButtonEl,
@@ -42,6 +43,7 @@ const GliderComponent = React.forwardRef(
scrollToPage,
iconLeft,
iconRight,
+ skipTrack,
children,
onLoad,
onSlideVisible,
@@ -222,7 +224,7 @@ const GliderComponent = React.forwardRef(
)}
- {children}
+ {skipTrack ? children :
{children}
}
{hasDots && !dots && }