삭제 기능이 있는 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

해피코딩...