DEV Community

NasreenKhalid
NasreenKhalid

Posted on • Updated on

React Slick Slider with Delete functionality

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

Installation

Let's begin by first installing the slider package

npm
npm install react-slick --save
Enter fullscreen mode Exit fullscreen mode

yarn

yarn add react-slick
Enter fullscreen mode Exit fullscreen mode


`

Also, we would need to install the css files for the slider:
`

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
Enter fullscreen mode Exit fullscreen mode

Now, let's create an image array having some images which we will display in the carousel:

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",
  ],
Enter fullscreen mode Exit fullscreen mode

We would also need to define a settings variable which contains the basic options for our slider like below:

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

Now, in our React component we will call our slider and make it work:

 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>
</>
  );
}
Enter fullscreen mode Exit fullscreen mode

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

Happing coding...

Discussion (0)