slide pagination example

frontend/src/Pages/picpagination.tsx

@@ -3,18 +3,20 @@ import React from "react";
 type num = {
     total: number,
     page: number, 
-    setPage: Function
+    setPage : Function
 }
     
-export function PaginationLeft ({total, page, setPage} : num) {
+export function PaginationLeft ({total, page,setPage} : num) {
     const numPages = Math.ceil(total / 15);
-// export function PaginationLeft ({ page, setPage} : num) {
-//     const numPages = 3
+
+    const left =()=>{
+        setPage(page - 1)
+    };
+
     return (
         <div>
-            <button onClick={() => setPage(page - 1)} disabled={page === 1}>
-                &lt;{page}
-            </button>
+            <button onClick={left} disabled={page === 1}>
+                &lt;{page}</button>
 
             {/* {Array(numPages)
                 .fill(1)
@@ -26,14 +28,16 @@ export function PaginationLeft ({total, page, setPage} : num) {
         </div>
     );
 };
-export function PaginationRight ({total, page, setPage} : num) {
+export function PaginationRight ({total, page,setPage} : num) {
     const numPages = Math.ceil(total / 15);
-// export function PaginationRight ({ page, setPage} : num) {
-//     const numPages = 3;
+
+    const right =()=>{
+        setPage(page + 1)
+    };
 
     return (
         <div>
-            <button onClick={() => setPage(page + 1)} disabled={page === numPages}>
+            <button onClick={right} disabled={page === numPages}>
                 &gt;
             </button>
         </div>

frontend/src/home/body.tsx

-import React, { useEffect, MouseEvent, useState } from "react";
+import React, { useEffect, MouseEvent, useState, useRef } from "react";
 import { Outlet, useSearchParams } from "react-router-dom";
 import Theme from "./theme";
 import Citylist from "../Pages/citylist";
@@ -14,7 +14,7 @@ export default function Body() {
   const offset1 = (page - 1) * limit;
   const offset2 = page * limit;
   const offset3 = (page + 1) * limit;
-  // const [selected, setSelected] = useState(1);
+  const renderRef = useRef() as React.MutableRefObject<HTMLDivElement>
   let getPics = getPicure();
 
   useEffect(() => {
@@ -22,6 +22,11 @@ export default function Body() {
     setSearchParams(searchParams)
   }, []);
 
+  useEffect(() => {
+    renderRef.current.style.transition = "all 0.5s ease-in-out"
+    renderRef.current.style.transform = `translateX(-${page - 1}00%)`
+  }, [page]);
+
   const themeHandleClick = (event: MouseEvent<HTMLButtonElement>) => {
     console.log(`theme id= ${event.currentTarget.id}`);
     setSearchParams({
@@ -66,14 +71,13 @@ export default function Body() {
           <Citylist handleClick={cityHandleClick} />
         </div>
         <div className="flex flex-col  overflow-hidden">
-          <div>
           <PaginationLeft total={Idpics.length} page={page} setPage={setPage} />
           <PaginationRight total={Idpics.length} page={page} setPage={setPage} />
-          </div>
-          <div className=" md:mr-10 md:basis-4/5  flex flex-row  transition duration-500 relative w-full " style={{ "transform": 'translate(-' + (page - 1) * 100 + '%)' }}>
-            <div className= "min-w-full">
+          <div className=" md:mr-10 md:basis-4/5  flex flex-row relative w-full " ref={renderRef}>
+            {/* <div className=" md:mr-10 md:basis-4/5  flex flex-row  transition duration-500 relative w-full " style={{"transform" : "translate(-"+(page-1)*100+"%)"}}>   */}
+            <div className="min-w-full">
               <div className="inline-grid grid-cols-5">
-                {Idpics.slice(0,15).map((pic, index: number) => (
+                {Idpics.slice(offset1, offset1 + limit).map((pic, index: number) => (
 
                   <div
                     className="m-1 shrink-0 bg-gray-200 rounded shadow-md"
@@ -88,9 +92,9 @@ export default function Body() {
                 ))}
               </div>
             </div>
-            <div className= "min-w-full">
+            <div className="min-w-full">
               <div className="inline-grid grid-rows-3 grid-cols-5">
-                {Idpics.slice(offset2, offset2+limit).map((pic, index: number) => (
+                {Idpics.slice(offset2, offset2 + limit).map((pic, index: number) => (
 
                   <div
                     className="m-1 shrink-0 bg-gray-200 rounded shadow-md"
@@ -106,9 +110,9 @@ export default function Body() {
                 ))}
               </div>
             </div>
-            <div className= "min-w-full">
+            <div className="min-w-full">
               <div className="inline-grid grid-rows-3 grid-cols-5">
-                {Idpics.slice(offset3, offset3+limit).map((pic, index: number) => (
+                {Idpics.slice(offset3, offset3 + limit).map((pic, index: number) => (
 
                   <div
                     className="m-1 shrink-0 bg-gray-200 rounded shadow-md"
@@ -133,3 +137,4 @@ export default function Body() {
     // Body Page
   );
 }
+

frontend/tailwind.config.js

@@ -2,23 +2,6 @@
 module.exports = {
   content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
   theme: {
-    extend: {
-      keyframes: {
-        wave: {
-          '0%': { left: '100%' },
-          '4%': { left: '0' },
-          '33.33%': { left: '0' },
-          '37.33%': { left: '-100%' },
-          '66.66%': { left: '-100%' },
-          '70.66%': { left: '-200%' },
-          '99.99%': { left: '-200%' },
-          '100%': { left: '0%' },
-        }
-      },
-      animation: {
-        wave : 'wave 12s ease-in-out'
-      }
-    },
-  },
+    extend: {},
   plugins: [],
-};
+}};