Slick

https://react-slick.neostack.com/

설명

🔖 이미지 슬라이드

설치

npm install @types/jquery --save-dev;
npm i react-slick @types/react-slick slick-carousel
// Import css files
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css"

사용법

import { useMemo } from 'react';
import styled from 'styled-components';
import Slider, { Settings } from 'react-slick';

import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

const SlideWrapper = styled.section`
  position: relative;
`;

interface sliderProps {
/** 슬라이더 아이템 요소 */
  children: React.ReactNode;
/** 커스텀 클래스 */
  className?: string;
/** 자동재생 (속도 설정시 number 타입으로) */
  autoplay?: boolean | number;
/** 슬라이더 속도 */
  speed?: number;
/** 반복 여부 */
  loop?: boolean;
}

functionSlick({
  children,
  className,
  autoplay = true,
  speed = 300,
  loop = true,
}: sliderProps) {
  const settings = useMemo<Settings>(
    () => ({
      dots: true,
      infinite: loop,
      speed: speed,
      slidesToShow: 1,
      autoplay:Boolean(autoplay),
      autoplaySpeed: typeof autoplay === 'boolean' ? 3000 : autoplay,
    }),
    [autoplay, loop, speed],
  );
  return (
    <SlideWrapper className={className}>
      <Slider {...settings}>{children}</Slider>
    </SlideWrapper>
  );
}

export default Slick;