styles fix

src/components/complexPage/SequenceSlider.tsx

@@ -4,6 +4,10 @@ import { useState, useEffect } from "react";
 import { isMobile } from "react-device-detect";
 import { useSwipeable } from "react-swipeable";
 import { Transition } from "react-transition-group";
+import Button from "../Button";
+import ActiveResizeIcon from "../icons/ActiveResizeIcon";
+import LeftArrowSliderIcon from "../icons/LeftArrowSliderIcon";
+import RightArrowSliderIcon from "../icons/RightArrowSliderIcon";
 
 // const marks = [
 //     {
@@ -49,13 +53,13 @@ interface SequenceSliderProps {
 
 function SequenceSlider({ path }: SequenceSliderProps) {
   const [selectedImageRightIndex, setSelectedRightImageIndex] =
-    useState<number>(keyframes[0]);
+    useState<number>(keyframes[3]);
   const [selectedImageLeftIndex, setSelectedImageLeftIndex] = useState<number>(
-    arrayLength - keyframes[0]
+    arrayLength - keyframes[3]
   );
   const [isAnimate, setIsAnimate] = useState<boolean>(false);
 
-  const [keyframeIndex, setKeyframeIndex] = useState<number>(0);
+  const [keyframeIndex, setKeyframeIndex] = useState<number>(3);
   const handlers = useSwipeable({
     trackMouse: true,
     onSwipedLeft: () => !isAnimate && next(),
@@ -158,16 +162,10 @@ function SequenceSlider({ path }: SequenceSliderProps) {
     return () => window.removeEventListener("resize", handleResize);
   }, []);
 
-  useEffect(() => {
-    console.log("selectedRightIn", selectedImageRightIndex);
-
-    return () => {};
-  }, []);
-
   return (
     <div
       {...handlers}
-      className="absolute w-full h-full overflow-hidden bg-black top-0 left-0"
+      className="absolute w-full h-full overflow-hidden bg-black top-0 left-0 z-10"
     >
       <div
         className="absolute left-0"
@@ -189,26 +187,22 @@ function SequenceSlider({ path }: SequenceSliderProps) {
           </>
         ))}
       </div>
-
-      <button
-        disabled={isAnimate}
-        className={`p-3 bg-[#0079C2] hover:bg-[#0069A8] rounded-full transition-colors absolute left-6 top-[calc(50%-24px)] z-50 ${
+      <Button
+        className={`p-3 rounded-full transition-colors absolute left-6 top-[calc(50%-24px)] z-50 ${
           isAnimate ? "opacity-50" : "opacity-100"
         }`}
+        buttonType="fab"
+        icon={<LeftArrowSliderIcon />}
         onClick={prev}
-      >
-        {/* <ChevronLeftIcon /> */}
-      </button>
-      <button
-        disabled={isAnimate}
-        className={`p-3 bg-[#0079C2] hover:bg-[#0069A8] rounded-full transition-all absolute right-6 top-[calc(50%-24px)] z-50 ${
+      />
+      <Button
+        className={`p-3 rounded-full transition-colors absolute right-6 top-[calc(50%-24px)] z-50 ${
           isAnimate ? "opacity-50" : "opacity-100"
         }`}
+        buttonType="fab"
+        icon={<RightArrowSliderIcon />}
         onClick={next}
-      >
-        {/* <ChevronRightIcon /> */}
-      </button>
-
+      />
       <div
         className="absolute left-0 z-40 select-none"
         style={{ width: `${width}px`, height: `${width}px`, top: `-${top}px` }}
@@ -219,9 +213,7 @@ function SequenceSlider({ path }: SequenceSliderProps) {
               ? "opacity-100"
               : "opacity-0"
           }`}
-        >
-          {/* <MainMarksContainer marks={marks} keyframeIndex={keyframeIndex} /> */}
-        </div>
+        ></div>
       </div>
 
       <Transition