React-Slick로 회전메뉴(Carousel/캐러셀 사용하기)

설치하기

$ npm install react-slick --save
$ npm install slick-carousel --save

 

 

 

 

세팅하기

import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

 

 

 

 

사용하기 (기본형)

function SimpleSlider() {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
  };
  
  return (
    <Slider {...settings}>
      <div>
        <h3>1</h3>
      </div>
      <div>
        <h3>2</h3>
      </div>
      <div>
        <h3>3</h3>
      </div>
      <div>
        <h3>4</h3>
      </div>
      <div>
        <h3>5</h3>
      </div>
      <div>
        <h3>6</h3>
      </div>
    </Slider>
  );
}

총 6개의 페이지를 가지고, 각 점을 클릭할때마다 해당 페이지로 이동한다.

 

 

 

 

 

사용하기 (응용형)

// App.jsx
import styled from "styled-components";
import UserInfo from "./components/userInfo";
import Carousel from "./components/Carousel";

const App = () => {
  const [web3, account] = useWeb3();
  return (
    <>
      <div style={{width:"100vw",height:"800px",overflow:"hidden"}}>
        <Carousel />
      </div>
    </>
  );
};

export default App;

// Carousel.js
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import { useRef } from "react";
import Card from "./Card";

function Carousel() {
  const sliderRef = useRef();
  const num = [{ a: 0 }, { a: 0 }, { a: 0 }];

  // 점(dot) 스타일
  const settings = {
    infinite: true,
    centerPadding: "0px",
    slidesToShow: 1,
    speed: 500,
    arrows: false,
    dots: true,
    variableWidth: true,
    appendDots: () => {
      return (
        <div
          style={{ width: "100vw", display: "flex", justifyContent: "center" }}
        >
          {num.map((_, i) => {
            return (
              <button
                style={{
                  width: "5px",
                  height: "5px",
                  backgroundColor: "red",
                  borderRadius: "100%",
                  marginRight:"10px"
                }}
                key={i}
              ></button>
            );
          })}
        </div>
      );
    },
  };

  return (
    <div style={{ width: "100%", display: "flex" }}>
      <Slider {...settings} ref={sliderRef}>
        {/* <Card />
        <Card /> */}

        {num.map((item, i) => {
          return (
            <div key={i}>
              <Card data={i} key={i} />
            </div>
          );
        })}
      </Slider>
    </div>
  );
}

export default Carousel;

// Card.js
function Card({data}) {
  console.log(data)
  return (
    <div
      style={{
        width: "30vw",
        height: "300px",
        backgroundColor: "olive",
        borderRadius: "20px",
        marginRight: "10px",
        display: "flex",
        justifyContent:"center",
        alignItems:"center"
      }}
    >
      {data}
    </div>
  );
}

export default Card;

 

 

 

 

 

 

자동으로 Card가 하나씩 넘어가도록 하기

&& 점(dot)을 클릭할때 해당 Card로 넘어가도록 하기

// Carousel.js
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import { useRef, useState, useEffect } from "react";
import Card from "./Card";

const num = [{ a: 0 }, { a: 0 }, { a: 0 }];

function Carousel() {
  const [list, setList] = useState([]);
  const [current, setCurrent] = useState(0);
  const sliderRef = useRef();

  useEffect(() => {
    setList(num);
  }, [num]);
  useEffect(() => {
    const interval = setInterval(() => {
      setCurrent(current > list.length - 2 ? 0 : current + 1);
      handleClick(current > list.length - 2 ? 0 : current + 1);
    }, 2500);

    return () => {
      clearInterval(interval);
    };
  }, [current, list?.length]);

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrent(current > list.length - 2 ? 0 : current + 1);
      handleClick(current > list.length - 2 ? 0 : current + 1);
    }, 5000);

    return () => {
      clearInterval(interval);
    };
  }, [current, list?.length]);

  const handleClick = (i) => {
    if (current === list.length - 1) {
      sliderRef.current.slickGoTo(current + 1);
      setCurrent(i);
    } else {
      sliderRef.current.slickGoTo(i);
      setCurrent(i);
    }
  };

  const settings = {
    infinite: true,
    centerPadding: "0px",
    slidesToShow: 1,
    speed: 500,
    arrows: false,
    dots: true,
    variableWidth: true,
    afterChange: (current) => setCurrent(current),
    appendDots: () => {
      return (
        <div
          style={{ width: "100vw", display: "flex", justifyContent: "center" }}
        >
          {num.map((_, i) => {
            return (
              <button
                style={{
                  width: "5px",
                  height: "5px",
                  backgroundColor: "red",
                  borderRadius: "100%",
                  marginRight: "10px",
                }}
                key={i}
                onClick={()=>handleClick(i)}
              ></button>
            );
          })}
        </div>
      );
    },
  };

  return (
    <div style={{ width: "100%", display: "flex" }}>
      <Slider {...settings} ref={sliderRef}>
        {/* <Card />
        <Card /> */}

        {num.map((item, i) => {
          return (
            <div key={i}>
              <Card data={i} key={i} />
            </div>
          );
        })}
      </Slider>
    </div>
  );
}

export default Carousel;

 

 

 

 

 

화살표 버튼으로 좌우 카드 이동하기 && 스타일 커스텀하기

arrows를 true로 해놓으면 Slider 좌우에 자동으로 화살표가 생긴다.

nextArrow나 prevArrow에 컴포넌트를 원하는 이름으로 생성을 한 후에, 컴포넌트 css를 작성하듯 작성하면 된다.

const settings = {
    infinite: true,
    centerPadding: "0px",
    slidesToShow: 1,
    speed: 500,
    arrows: true,
    nextArrow: <NextArrow />,
    prevArrow: <PrevArrow />,
    dots: true,
}

const NextArrow(){
  // 원하는 기능 구현
}