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

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

7
8
9
10
11
12
13
export function MySlide({ slides }: num) {
  const firstLeftClick = useRef(true);
  const firstRightClick = useRef(true);
  const [page, setPage] = useState(1);
  const [slide, setSlide] = useState(1);
  // const slide = useRef(1);
  const [style, setStyle] = useState("");
백승민's avatar
백승민 committed
14

15
16
17
18
19
20
21
22
23
24
25
  const leftClick = () => {
    if (firstLeftClick.current) {
      firstLeftClick.current = false;
      firstRightClick.current = true;
    } else {
      setPage(page - 1);
    }
    // slide.current -= 1;
    setSlide(slide - 1);
    setStyle("-translate-x-full animate-slidetoright");
  };
백승민's avatar
백승민 committed
26

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

39
40
41
42
43
44
45
46
47
48
49
50
51
52
  return (
    <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;
      </button>
      <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
53
            <div
54
55
              key={slide}
              className={`inline-grid grid-cols-2 ${style} min-w-full`}
백승민's avatar
백승민 committed
56
            >
57
              {slide}
백승민's avatar
백승민 committed
58
            </div>
59
60
61
62
63
64
65
66
67
68
69
70
71
          </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}
      >
        &gt;
      </button>
    </div>
  );
}