From 8a6444ad21775ee1d486e93b138d63446d9190e7 Mon Sep 17 00:00:00 2001
From: Kevin Farrugia <hello@imkev.dev>
Date: Fri, 7 Oct 2022 10:14:26 +0200
Subject: [PATCH] Render dynamic data inside glider-track

---
 docs/demos.tsx                 |  5 +++++
 examples/dynamicDataGlider.tsx | 39 ++++++++++++++++++++++++++++++++++
 src/index.tsx                  |  4 +++-
 3 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 examples/dynamicDataGlider.tsx

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() {
         <h3>Skip Track</h3>
         <SkipTrackGlider />
       </div>
+      <div className="item">
+        <h3>Dynamic Data</h3>
+        <DynamicDataGlider />
+      </div>
     </div>
   );
 }
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 (
+    <div className="container">
+      <input
+        type="button"
+        onClick={() => {
+          const newData = [
+            ...new Array(Math.floor(Math.random() * 12) + 1),
+          ].map((_, index) => index + 1);
+          setData(newData);
+        }}
+        value="Randomize"
+      />
+      <div className="container">
+        <Glider
+          className="glider-container"
+          slidesToShow={1}
+          scrollLock
+          hasDots
+          draggable
+        >
+          {data.map((n) => (
+            <div key={n} className="slide">
+              <span>{n}</span>
+            </div>
+          ))}
+        </Glider>
+      </div>
+    </div>
+  );
+}
+
+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(
         )}
 
         <div id={id || autoId} className={className} ref={callbackRef}>
-          {children}
+          {skipTrack ? children : <div>{children}</div>}
         </div>
 
         {hasDots && !dots && <div ref={dotsRef} />}