myslide.tsx 1.98 KB
Newer Older
백승민's avatar
백승민 committed
1
2
3
import React, { useRef, useState } from "react";

type num = {
백승민's avatar
백승민 committed
4
    slides: any[],
백승민's avatar
백승민 committed
5
6
}

백승민's avatar
백승민 committed
7
export function MySlide({ slides}: num) {
백승민's avatar
백승민 committed
8
9
10

    const firstLeftClick = useRef(true);
    const firstRightClick = useRef(true);
백승민's avatar
백승민 committed
11
12
13
14
    const [page, setPage] = useState(1);
    const [slide,setSlide] = useState(1);
    // const slide = useRef(1);
    const [style, setStyle] = useState("");
백승민's avatar
백승민 committed
15
16
17
18
19
20
21
22

    const leftClick = () => {
        if (firstLeftClick.current) {
            firstLeftClick.current = false;
            firstRightClick.current = true;
        } else {
            setPage(page - 1)
        }
백승민's avatar
백승민 committed
23
24
        // slide.current -= 1;
        setSlide(slide-1)
백승민's avatar
백승민 committed
25
26
27
28
29
30
31
32
33
34
        setStyle("-translate-x-full animate-slidetoright");
    };

    const rightClick = () => {
        if (firstRightClick.current) {
            firstLeftClick.current = true;
            firstRightClick.current = false;
        } else {
            setPage(page + 1)
        }
백승민's avatar
백승민 committed
35
36
        // slide.current += 1;
        setSlide(slide+1)
백승민's avatar
백승민 committed
37
38
39
40
        setStyle("animate-slidetoleft");
    };

    return (
백승민's avatar
백승민 committed
41
42
43
        <div className="flex flex-row justify-center items-center ">
            <button className="mx-3 w-6 h-6 rounded-full hover:bg-sky-100 hover:text-gray-400"onClick={leftClick} disabled={slide === 1}>
                &lt;
백승민's avatar
백승민 committed
44
            </button>
백승민's avatar
백승민 committed
45
46
47
48
49
50
            <div
                className={`m-3 md:m-5 md:basis-4/5 flex flex-row relative w-full overflow-hidden`}
            >
                {slides.slice(page - 1, page + 2).map((slide) => (
                    <div key={Math.random()} className="min-w-full"
                    >
백승민's avatar
백승민 committed
51
                        <div key={slide} className={`inline-grid grid-cols-2 ${style}`}>
백승민's avatar
백승민 committed
52
53
54
55
56
57
                            {slide}
                        </div>
                    </div>
                ))}
            </div>
            <button className="mx-3 w-6 h-6 rounded-full hover:bg-sky-100 hover:text-gray-400"onClick={rightClick} disabled={slide === slides.length}>
백승민's avatar
백승민 committed
58
59
60
                &gt;
            </button>
        </div>
백승민's avatar
백승민 committed
61

백승민's avatar
백승민 committed
62
63
64

    );
};