@uiworkspace/sliders NPM

@uiworkspace/sliders

A library of pre-built slider components you can place on any react site.

Demos

Installation

npm i @uiworkspace/sliders

Flixslider usage

Note: Your total images should be at least double your specified amount per screen.

import { Flixslider } from '@uiworkspace/sliders'

export default function Yourcomponent() {

  const sliderContent = {
    offsetPercentage: 4,
    showOffsetOverlay: true,
    transitionSpeed: 0.45,
    mobileslidesPerScreen: 2,
    desktopslidesPerScreen: 3,
    images: [
      {
        imglink: "/images/photo.jpg", //path to image
      },
      {
        imglink: "/images/photo.jpg",
      },
      {
        imglink: "/images/photo.jpg",
      },
      {
        imglink: "/images/photo.jpg",
      },
      {
        imglink: "/images/photo.jpg",
      },
      {
        imglink: "/images/photo.jpg",
      },
    ],
  };

   return <Flixslider content={sliderContent} />
}

Fadeslider usage

import { Fadeslider } from '@uiworkspace/sliders'

export default function Yourcomponent() {

  const sliderContent = {
    arrowColor: "white", //optional
    customRightArrow: "", //optional
    customLeftArrow: "", //optional
    width: "100%", //optional
    height: "100vh", //optional
    slides: [
      {
        image: "/images/photo.jpg", //path to image
      },
      {
        image: "/images/photo.jpg",
      },
      {
        image: "/images/photo.jpg",
      },
    ],
  };

   return <Fadeslider content={sliderContent}></Fadeslider>
}

Parallax slider usage

import { Parallaxslider } from '@uiworkspace/sliders'

export default function Yourcomponent() {

  const sliderContent = {
    arrowColor: "white", //optional
    customRightArrow: "", //optional
    customLeftArrow: "", //optional
    width: "100%", //optional
    height: "80vh", //optional
    slides: [ //required
      {
        image: "/images/x.jpg",
      },
      {
        image: "/images/x1.jpg",
      },
      {
        image: "/images/x2.jpg",
      },
    ],
  };

   return <Parallaxslider content={sliderContent} />
}