Nefarious Pickle Muncher

    react-moving-slider

    0.1.8 • Public • Published

    React Moving Slider

    A simple React component that displays your images using CSS animations and transitions.

    It supports click events for sliding and moving through an array of images.

    Demo here

    React Moving Slider Example

    Installation

    run npm install react-moving-slider and then, in your component import MovingSlider from 'react-moving-slider'

    Usage

    The basic setup for a slider is

    import React from "react"
    import MovingSlider from 'react-moving-slider'
    
    function App() {
      return (
        <MovingSlider
            images={[
                "https://picsum.photos/1200/1500?random=1",
                "https://picsum.photos/1200/1500?random=2",
                "https://picsum.photos/1200/1500?random=3",
            ]}
        />
      )
    }
    

    You can of course change the array values to be your images URLs

    Options

    Option Name Type Description Default Value Required
    minHeight number the minimal height that one column can reach (in percentage and relative to the parent container) 20 No
    maxHeight number the maximal height that one column can reach (in percentage and relative to the parent container) 100 No
    images Array the array of images to be passed as "background-image" value, if more than 1 is provided, the handleSlide method will handle the transition between images on click [] Yes
    numColumns number the number of columns to be displayed as div with the background fixed image 30 No
    smartphoneNumColumns number the number of columns to be displayed as div with the background fixed image on a smartphone screen 15 No
    fixedHeight number If provided, the slider will ignore it's parent height and will use this value in pixels insted null No
    fixedWidth number If provided, the slider will ignore it's parent width and will use this value in pixels insted null No
    speed number The speed of the looped animation in seconds 3 No

    Install

    npm i react-moving-slider

    DownloadsWeekly Downloads

    0

    Version

    0.1.8

    License

    ISC

    Unpacked Size

    10.3 kB

    Total Files

    6

    Last publish

    Collaborators

    • michintosh