rss
react-styled-slider
npm i react-styled-slider
rss

react-styled-slider

React styled components carousel or slide show. No external css import is required.

by Akhil Pentamsetti

0.1.4 (see all)License:MITTypeScript:Not Found
npm i react-styled-slider
Readme

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

PropsTypeDefault ValueDescription
showArrowsBooleantrueIf true then only Arrows of navigation will be shown
LeftArrowReact NodeDefaultCustomized left arrow button
infiniteBooleantrueInfinitely slide cards
RightArrowReact NodeDefaultCustomized right arrow button
showDotsBooleantrueShow navigation or pagination dots below the slider
DotReact NodeDefaultCustomized pagination button (Active slide Dot will get active as Boolean prop.)
childrenReact NodenullCards are components which you want to show in the carousel
cardsToShowNumberChildren lengthHow many cards to be shown for a single slide.
afterSlideFunctionnullThis function will be executed after every sliding is completed
beforeSlideFunctionnullThis function will be executed before starting every sliding

License

MIT (Free Software, Chill Yeah!)

Downloads/wk

2

GitHub Stars

42

LAST COMMIT

3yrs ago

MAINTAINERS

1

CONTRIBUTORS

6

OPEN ISSUES

7

OPEN PRs

22
VersionTagPublished
0.1.4
latest
4yrs ago
No alternatives found
No tutorials found
Add a tutorial