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

yarn

yarn add react-slick

`

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";

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",
  ],

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,                                                             
};

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>
</>
  );
}

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...