삭제 기능이 있는 React Slick Slider

슬라이더는 웹 애플리케이션에서 이미지를 표시하는 가장 일반적이고 널리 사용되는 방법 중 하나입니다.
미리 만들어진 슬라이더를 사용하고 웹 사이트를 아름답게 만들 수 있는 많은 패키지가 있습니다.
오늘은 여기에서 react-slick-carousel에 대해 논의하고 react slick carousel을 사용하여 이미지를 표시하고 각 이미지에 삭제 버튼을 만들어 사용자가 즉시 이미지를 삭제할 수 있도록 하겠습니다.
react-slick-sliderhere와 관련된 추가 문서를 읽을 수 있습니다.

설치

슬라이더 패키지를 먼저 설치해 보겠습니다.


npm

npm install react-slick --save

실

yarn add react-slick

`

또한 슬라이더용 css 파일을 설치해야 합니다.
`

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

이제 캐러셀에 표시할 이미지가 있는 이미지 배열을 만들어 보겠습니다.

const images= [
    "https://media.istockphoto.com/photos/forest-wooden-table-background-summer-sunny-meadow-with-green-grass-picture-id1353553203?b=1&k=20&m=1353553203&s=170667a&w=0&h=QTyTGI9tWQluIlkmwW0s7Q4z7R_IT8egpzzHjW3cSas=",
"https://image.shutterstock.com/image-photo/old-brick-black-color-wall-260nw-1605128917.jpg",
  ],

또한 아래와 같이 슬라이더의 기본 옵션을 포함하는 설정 변수를 정의해야 합니다.

const settings = {
  dots: false,
  autoplay: true,
  infinite: true,
  speed: 500,
  slidesToShow: 1,
  slidesToScroll: 1,                                                             
};

이제 React 구성 요소에서 슬라이더를 호출하고 작동하도록 합니다.

 export default function ReactSlider() {

const [pics, setPics] = useState([]);

  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
  };
  return (
<>
    <Slider {...settings}>
      {images.map((item, index) => (
            <div key={index}>
               <img alt="name"
                    src={item}
                    style={{ width: 400, height: 300 }}
                    />
         <div style={{ position: "absolute", top: "0px" }}>
            <Button onClick={() => {           
             const filterIndex =images.indexOf(i);
             if (filterIndex > -1) {        
             images.splice(filterIndex, 1)                                   
             setPics(images.filter((item, i)=>i !== item));                                 
                            }
                            }                                  
                 >X</Button>
                 </div>
                    </div>
                     ))}
    </Slider>
</>
  );
}

또한 각 이미지에 'X' 버튼을 배치하고 사용자가 삭제 버튼을 클릭한 이미지를 제외한 이미지 배열을 필터링하여 버튼을 클릭하자마자 이미지가 슬라이더에서 삭제되고 나머지 이미지는 표시됩니다.

위의 글을 즐겁게 읽으셨기를 바랍니다.

실습 코딩 기술을 갖춘 전문 개발자가 되는 학습 경험을 찾고 있다면 최고의 과정here 중 하나에 가입하세요.

행복한 코딩...