kollors

components/ImageSlide.tsx

@@ -1,41 +1,41 @@
-import React, {Children, useState} from "react";
-import {AiFillLeftCircle} from 'react-icons/ai';
+import React, { useState } from "react";
+import { AiFillLeftCircle } from "react-icons/ai";
 
+export const ImageSlide = ({ children }: any) => {
+  const [current, setCurrent] = useState(0);
+  const length = children.length;
 
-export const ImageSlide = ({children}:any) => {
-    const [current, setCurrent] = useState(0);
-    const length = children.length;
-    
-    const array = Children.toArray(children);
-    console.log(array)
-    
-    const nextSlide = () => {
-        setCurrent(current === length - 1 ? 0 : current + 2);
-    };
+  const nextSlide = () => {
+    setCurrent(current === length - 1 ? 0 : current + 2);
+  };
 
-    const prevSlide = () => {
-        setCurrent(current === 0 ? length - 1 : current - 2);
-    };
-    if(children.length <= 0){
-        return null;
-    };
+  const prevSlide = () => {
+    setCurrent(current === 0 ? length - 1 : current - 2);
+  };
+  if (children.length <= 0) {
+    return null;
+  }
 
-    return(
-      <section className='slider'>
-        <AiFillLeftCircle className='left-arrow' onClick={prevSlide} />
-        <AiFillLeftCircle className='right-arrow' onClick={nextSlide} />
-        {children.map((slide : any, index : any) => {
-          return (
-            <div
-              className={index === current ? 'slide active' : 'slide'}
-              key={index}
-            >
-              {index === current && (
-                <img src={slide.props.children[0]} alt='travel image' className='image' />
-              )}
-            </div>
-          );
-        })}
-      </section>
-    );
-};
+  return (
+    <section className="slider">
+      <AiFillLeftCircle className="left-arrow" onClick={prevSlide} />
+      <AiFillLeftCircle className="right-arrow" onClick={nextSlide} />
+      {children.map((slide: any, index: any) => {
+        return (
+          <div
+            className={index === current ? "slide active" : "slide"}
+            key={index}
+          >
+            {index === current && (
+              <img
+                src={slide.props.children[0]}
+                alt="travel image"
+                className="image"
+              />
+            )}
+          </div>
+        );
+      })}
+    </section>
+  );
+};