Creating a Draggable Slider in React

What is a Slider?

A website slider is a slideshow that displays a series of images or items arranged horizontally or vertically within a single space. Users can navigate through the slider images using navigation controls, and the images can also be looped through.

What is a Draggable Slider?

A draggable slider allows users to navigate manually by holding and dragging the current item to the left or right to view the next or previous item.

Using react-draggable-slider

To create a draggable slider in React, we can use the react-draggable-slider package. This package is easy to use and comes with an inbuilt hover effect.

Demo

Let’s create a demo to showcase how to use react-draggable-slider. We’ll set up a React app, install the package, and then create the slider and define its settings.

Setting Up the React App

npx create-react-app react-draggable-slider

Open the app in your code editor and navigate to the package.json file.

Installing react-draggable-slider

npm install react-draggable-slider

Downgrade the versions of the react and react-dom packages to v16 to ensure compatibility with react-draggable-slider. Run the command npm install to update the packages.

Creating the Slider

import React from 'react';
import Slider from 'react-draggable-slider';

const sliderSettings = {
  data: [
    { image: 'image1.jpg', text: 'Slide 1' },
    { image: 'image2.jpg', text: 'Slide 2' },
    { image: 'image3.jpg', text: 'Slide 3' }
  ],
  speed: 500,
  easing: 'ease-in-out',
  bgColor: '#f2f2f2',
  showButton: true,
  buttonText: 'Learn More',
  buttonHref: '/learn-more',
  buttonTarget: '_blank'
};

const App = () => {
  return (
    
      {/* Slide content here */}
    
  );
};

Defining Slider Settings

• data: an array of objects representing the slider items
• speed: the speed of the slider animation
• easing: the easing effect used for the animation
• bgColor: the background color of the slider
• showButton: a boolean indicating whether to show a button for each item
• buttonText: the text displayed inside the button
• buttonHref: the link associated with each button
• buttonTarget: the target attribute for each button

Styling the Slider

Add CSS styles to customize the appearance of the slider. Import the styles.css file into the App.js file.

/* styles.css */
.slider {
  width: 100%;
  height: 400px;
  background-color: #f2f2f2;
}

.slider-item {
  width: 100%;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slider-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}