자동 재생, 전체 화면 모드로 슬라이드쇼 구성 요소 반응 및 모두 확장

모든 부가 기능이 포함된 React Slideshow 구성 요소

라이브 데모 →

코드 보기 →

https://www.educative.io/에 사용된 슬라이더가 마음에 들어서 React로 디자인과 기능을 재현하고 싶었습니다.

특징

이전/다음 슬라이드

자동 재생 슬라이드

다시 시작 슬라이더

모든 슬라이드 펼치기/접기

전체 화면 슬라이드 모드

간단한 API

const data = [
  {
    title: "First",
    text: "foo bar baz"
  },
  ...
];

...

// optional prop autoPlayTime to control autoplay time on slide
<Slides slides={data} /> 

코드 반복을 피하기 위해 몇 가지 사용자 지정 후크를 사용했습니다.
useCount – 활성 슬라이드 인덱스 제어용

import { useState } from "react";

export const useCount = (initialValue = 0) => {
  const [activeIndex, setActiveIndex] = useState(initialValue);

  const increment = () => {
    setActiveIndex((prev) => prev + 1);
  };

  const decrement = () => {
    setActiveIndex((prev) => prev - 1);
  };

  const reset = () => {
    setActiveIndex(initialValue);
  };

  return [activeIndex, increment, decrement, reset];
};

useToggle – 확장/축소 슬라이드, 자동 재생 모드 및 전체 화면 모드 제어용

import { useCallback, useState } from "react";

export const useToggle = (initialValue = false) => {
  const [state, setState] = useState(initialValue);
  const toggle = useCallback(() => setState((state) => !state), []);
  return [state, toggle];
};

useInterval – 자동 재생 모드에서 슬라이드 증분 제어용

import { useEffect, useRef } from "react";
export const useInterval = (callback, delay) => {
  const intervalId = useRef(null);
  const savedCallback = useRef(callback);

  useEffect(() => {
    savedCallback.current = callback;
  });

  useEffect(() => {
    const tick = () => savedCallback.current();

    if (typeof delay === "number") {
      intervalId.current = window.setInterval(tick, delay);

      return () => window.clearInterval(intervalId.current);
    }
  }, [delay]);

  return intervalId.current;
};