slide pagination (not done)

frontend/src/Pages/picpagination.tsx

 import React from "react";
 
 type num = {
-    total: number, 
+    // total: number, 
     page: number, 
     setPage: Function
 }
 
-export default function Pagination ({total, page, setPage} : num) {
-    const numPages = Math.ceil(total / 15);
-
+// export function PaginationLeft ({total, page, setPage} : num) {
+    // const numPages = Math.ceil(total / 15);
+export function PaginationLeft ({ page, setPage} : num) {
+    const numPages = 3
     return (
         <div>
             <button onClick={() => setPage(page - 1)} disabled={page === 1}>
@@ -22,7 +23,16 @@ export default function Pagination ({total, page, setPage} : num) {
                         {i + 1}
                     </button>
                 ))} */}
+        </div>
+    );
+};
+// export function PaginationRight ({total, page, setPage} : num) {
+//     const numPages = Math.ceil(total / 15);
+export function PaginationRight ({ page, setPage} : num) {
+    const numPages = 3;
 
+    return (
+        <div>
             <button onClick={() => setPage(page + 1)} disabled={page === numPages}>
                 &gt;
             </button>

frontend/src/home/body.tsx

@@ -3,7 +3,7 @@ import { Outlet, useSearchParams } from "react-router-dom";
 import Theme from "./theme";
 import Citylist from "../Pages/citylist";
 import { getPicure } from "../Pages/pic";
-import Pagination from "../Pages/picpagination";
+import { PaginationLeft ,PaginationRight} from "../Pages/picpagination";
 
 const initSearchParams = { theme: "", city: "" };
 
@@ -12,7 +12,7 @@ export default function Body() {
   const [searchParams, setSearchParams] = useSearchParams(initSearchParams);
   const [page, setPage] = useState(1);
   const offset = (page - 1) * limit;
-
+  const [selected, setSelected] = useState(1);
   let getPics = getPicure();
 
   useEffect(() => {
@@ -48,13 +48,45 @@ export default function Body() {
     );
   });
 
+  const pre = () =>{
+    setSelected(selected -1)
+    };
+
+  const next = () =>{
+    setSelected(selected + 1)
+    };
+
   return (
     <div className="flex flex-col px-1 py-1">
       <Theme handleClick={themeHandleClick} />
       <div className="flex flex-col md:flex-row py-10 ">
+        <div className="w-50">
           <Citylist handleClick={cityHandleClick} />
-        <div className=" md:mr-10 md:basis-4/5 grid grid-rows-3 grid-cols-5">
-          {Idpics.slice(offset, offset + limit).map((pic, index: number) => (
+        </div>
+        <div className="flex flex-col">
+          <div>
+            <button onClick={pre} disabled={selected === 1}>&lt;{selected}</button>
+            <button onClick={next} disabled={selected === 3}>&gt;</button>
+          </div>
+          <div >
+            <div className=" md:mr-10 md:basis-4/5 overflow-hidden">
+              <div className=" flex flex-row transition duration-500 relative" style={{"transform": 'translate(-' + (selected-1)*100 + '%)'}}>
+                <img className = "border-2"src="https://t1.daumcdn.net/cfile/tistory/9947E0365C31C1BF0E"/>
+                <img className = "border-2"src="https://t1.daumcdn.net/cfile/tistory/9947E0365C31C1BF0E"/>
+                <img className = "border-2"src="https://t1.daumcdn.net/cfile/tistory/9947E0365C31C1BF0E"/>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <Outlet />
+    </div>
+    // Body Page
+  );
+}
+{/* <div className=" md:mr-10 md:basis-4/5 grid grid-rows-3 grid-cols-5"></div> */}
+ {/* {Idpics.slice(offset, offset + limit).map((pic, index: number) => (
             <div
             className="m-1 shrink-0 bg-gray-200 rounded overflow-hidden shadow-md"
             key={index} 
@@ -65,13 +97,6 @@ export default function Body() {
                 />
                 <p className="text-center text-xs">{pic.name}</p>
                 </div>
-          ))} 
-        <Pagination total={Idpics.length} page={page} setPage={setPage} />
-        </div>
-      </div>
-      
-      <Outlet />
-    </div>
-    // Body Page
-  );
-}
+              ))}  */}
+              {/* <PaginationLeft total={Idpics.length} page={page} setPage={setPage} /> */}
+            {/* <PaginationRight total={Idpics.length} page={page} setPage={setPage} /> */}
\ No newline at end of file

frontend/tailwind.config.js

@@ -5,15 +5,18 @@ module.exports = {
     extend: {
       keyframes: {
         wave: {
-          '0%': { left: '100' },
+          '0%': { left: '100%' },
           '4%': { left: '0' },
           '33.33%': { left: '0' },
-          '37.33%': { left: '-100' },
-          '100%': { left: '-100' },
+          '37.33%': { left: '-100%' },
+          '66.66%': { left: '-100%' },
+          '70.66%': { left: '-200%' },
+          '99.99%': { left: '-200%' },
+          '100%': { left: '0%' },
         }
       },
       animation: {
-        wave : 'wave 10s ease-in-out'
+        wave : 'wave 12s ease-in-out'
       }
     },
   },