Naturally Pacifist Marsupials

    react-styled-slider

    0.1.4 • Public • Published

    React Styled Slider

    React Styled Slider is a react and styled component slider. It is fully configurable.

    Build Status

    Live Image

    Features

    • Mostly configurable
    • Styled-Components
    • No external CSS required.
    • Server Side Rendering supported

    Note: Server Side Rendering works well without the styled-components collectStyles function also. But for better user experience please use collectStyles function from styled-components

    Installation

    $ npm install --save react-styled-carousel

    Running example in local

    $ git clone github.com/itsMrAkhil/react-styled-carousel
    $ npm start

    It'll open localhost:9000 port, where you can see live demo.

    Example

    import React from 'react';
    import ReactDOM from 'react-dom'
    import Slider from 'react-styled-carousel';
     
    const ExampleSlider = () => (
      <Slider>
        <h1>1</h1>
        <h1>2</h1>
        <h1>3</h1>
        <h1>4</h1>
      </Slider>
    );
     
    ReactDOM.render(<ExampleSlider />, document.getElementById('root'));

    Configurable Props

    Props Type Default Value Description
    showArrows Boolean true If true then only Arrows of navigation will be shown
    LeftArrow React Node Default Customized left arrow button
    infinite Boolean true Infinitely slide cards
    RightArrow React Node Default Customized right arrow button
    showDots Boolean true Show navigation or pagination dots below the slider
    Dot React Node Default Customized pagination button (Active slide Dot will get active as Boolean prop.)
    children React Node null Cards are components which you want to show in the carousel
    cardsToShow Number Children length How many cards to be shown for a single slide.
    afterSlide Function null This function will be executed after every sliding is completed
    beforeSlide Function null This function will be executed before starting every sliding

    License

    MIT (Free Software, Chill Yeah!)

    Install

    npm i react-styled-slider

    DownloadsWeekly Downloads

    12

    Version

    0.1.4

    License

    MIT

    Unpacked Size

    30.6 kB

    Total Files

    16

    Last publish

    Collaborators

    • itsmrakhil