Merge pull request #131 from kevinfarrugia/dynamic-data

Render dynamic data inside glider-track

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>
   );
 }

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;

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} />}