From f386a008fe5d422901a04159dd16799faaa1d6e2 Mon Sep 17 00:00:00 2001 From: AdityaSingh-02 <asaditya2002@gmail.com> Date: Wed, 11 Oct 2023 12:18:00 +0530 Subject: [PATCH] add carousel --- src/components/Fourth/fourth.tsx | 29 +++++++++++++++++++++++++---- src/components/Fourth/reviews.json | 20 ++++++++++++-------- src/components/Slides/slide.tsx | 1 + 3 files changed, 38 insertions(+), 12 deletions(-) diff --git a/src/components/Fourth/fourth.tsx b/src/components/Fourth/fourth.tsx index 2c90013..77ddf96 100644 --- a/src/components/Fourth/fourth.tsx +++ b/src/components/Fourth/fourth.tsx @@ -1,5 +1,5 @@ "use client"; -import React, { useEffect, useState } from "react"; +import React, { use, useEffect, useState } from "react"; import style from "./fourth.module.css"; import Image from "next/image"; import { slide as Slide, Props as IRevs } from "../Slides/slide"; @@ -13,11 +13,32 @@ export const Fourth = () => { text: "Hello world", }); + const [keyId, setKey] = useState<number>(1); + useEffect(() => { setTimeout(() => { - setReviews(revs.rev1); - }, 3000); - }, []); + getIndex(revs.rev1.key); + if (keyId == 1) { + setReviews(revs.rev1); + } else if (keyId == 2) { + setReviews(revs.rev2); + } else if (keyId == 3) { + setReviews(revs.rev3); + } else { + setReviews(revs.rev4); + } + }, 5000); + }, [keyId]); + + const getIndex = (num: number) => { + setKey((prev)=>{ + if(prev == 4){ + return prev = 1 + }else{ + return prev +=1; + } + }) + }; return ( <div className={style.fourth}> diff --git a/src/components/Fourth/reviews.json b/src/components/Fourth/reviews.json index 8afac42..6b40c07 100644 --- a/src/components/Fourth/reviews.json +++ b/src/components/Fourth/reviews.json @@ -1,26 +1,30 @@ { "rev1": { + "key":1, "im": "/person.png", - "name": "joshua", + "name": "John Doe", "position": "marketing", - "text": "Hello this is johua" + "text": "Hello this is John Doe" }, "rev2": { + "key":2, "im": "/person.png", - "name": "joshua sam", + "name": "Foo", "position": "marketing", - "text": "Hello this is johua" + "text": "Hello this is foo" }, "rev3": { + "key":3, "im": "/person.png", - "name": "joshua singh", + "name": "Bar", "position": "marketing", - "text": "Hello this is johua" + "text": "Hello this is Bar" }, "rev4": { + "key":4, "im": "/person.png", - "name": "joshua jodd", + "name": "NextJs", "position": "marketing", - "text": "Hello this is johua" + "text": "Hello this is NexTJs" } } \ No newline at end of file diff --git a/src/components/Slides/slide.tsx b/src/components/Slides/slide.tsx index 28bcb12..fef2b41 100644 --- a/src/components/Slides/slide.tsx +++ b/src/components/Slides/slide.tsx @@ -8,6 +8,7 @@ export interface Props { name: string; position: string; text: string; + key?: number; } export const slide = (props: Props) => {