React Slick Slider with Delete functionality
Tags: react, slickcarousel, crud, delete
Published: 2022-06-15 05:58:51

Sliders are one of the most common and widely used ways to display images in our web applications. 
There are many packages that allow us to make use of pre-built sliders and make our websites beautiful.
Today, I will discuss the react-slick-carousel over here and display the images using react slick carousel, also we will create a delete button with each image allowing user to delete the image on the fly.
You can read further documentation related to react-slick-slider [here](https://www.npmjs.com/package/react-slick)

### Installation


Let's begin by first installing the slider package
##### npm
```javascript
npm install react-slick --save
```

#### yarn
````javascript
yarn add react-slick
````

Also, we would need to install the css files for the slider:
````javascript
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
```

Now, let's create an image array having some images which we will display in the carousel:
```javascript
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",
  ],
```

We would also need to define a settings variable which contains the basic options for our slider like below:
```javascript
const settings = {
  dots: false,
  autoplay: true,
  infinite: true,
  speed: 500,
  slidesToShow: 1,
  slidesToScroll: 1,                                                             
};
```

Now, in our React component we will call our slider and make it work:
````javascript
 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>
</>
  );
}
```

Notice that we have also placed an 'X' button with each image and filtered the images array excluding those images where user have clicked the delete button so as soon as the button is clicked the image will get deleted from the slider and remaining images will be shown.

I hope you enjoyed reading the above article .

If you are looking for a learning experience that makes you a professional developer with hands-on coding skills, join one of the best courses [here](https://qvault.io/?via=nasreen)

Happing coding...