react-draggable-slider v0.1.6

react-draggable-slider

Installation

npm install react-draggable-slider --save-dev

Demo

https://sanderdebr.github.io/react-draggable-slider/

Usage

Add <Slider /> component with sliderSettings object, the only required setting an array of slider items.

import { Slider } from "react-draggable-slider";
import { projectList } from "./data";

function App() {
  const sliderSettings = {
    data: projectList,
    speed: 3000,
    easing: "elastic",
    bgColor: "rgba(255, 255, 255, 0.05)",
    buttonHref: "https://www.google.com",
    buttonTarget: "_self",
    buttonText: "View project",
    showButton: true,
  };
  return <Slider sliderSettings={sliderSettings} />;
}

Use the following structure for your slider items:

export const projectList = [
  {
    title: "Cutting Edge Project",
    image: "https://source.unsplash.com/collection/347317/",
    description: "Praesent quis congue nisi...",
  },
  {
    title: "Featured Artist 3D",
    image: "https://source.unsplash.com/collection/3573299/",
    description: "Duis at tellus vitae velit aliquet varius...",
  },
];

Note: although the above example uses hooks, react-draggable-slider is compatible with Class-based components. However, since it internally uses hooks, it requires React 16.8+.

Props

The sliderSettings prop in <Slider sliderSettings={sliderSettings} /> component accepts the following props:

Using

• React Spring
• GSAP
• Styled Components