devsgnr-carousel
TypeScript icon, indicating that this package has built-in type declarations

1.3.0 • Public • Published

devsgnr-carousel

🎉 A Simple Carousel built using React, Typescript and styled-components


npm npm bundle size npm NPM GitHub watchers


Table of Content

  1. Install
  2. Usage
  3. Demos
  4. Props

Install

npm

npm install devsgnr-carousel

yarn

yarn add devsgnr-carousel


Usage

Example with default props ~ customize props according to your needs, check props.

...
import Carousel from "devsgnr-carousel

const App = () => {
  const pictures: string[] = [...];

  return (
    <div className="App">
      <Carousel
        borderRadius={10}
        timeout={5000}
        autoPlay={true}
        pictures={pictures}
        height="400px"
        showThumb={false}
        thumbnailOutlineColor="#000"
        thumbnailOutlineStyle="solid"
        thumbnailOutlineOffset={1}
        thumbnailOutlineThickness={2}
        showButton={true}
        showIndicator={true}
      />
    </div>
  );
};

export default App;

Demos


Props

props values
autoPlay boolean: optional? default true. set the carousel to automatically play or not
timeout number: optional? default 5000. set the duration for each picture
height string: optional? default "100%". set the height of the carousel
pictures string[]: required this is the pictures address
showThumbs boolean: optional? default false. when set to true shows the image thumbnails
showIndicators boolean: optional? default true. when set to false hides the indicators
showButtons boolean: optional? default: true. when set to false hides buttons
thumbnailOutlineColor string: optional? default #000. accepts hsla, rgba, rgb, and hex values
thumbnailOutlineThickness number: optional? default 2. sets the thickness of the outline of the thumbnails
thumbnailOutlineStyle string: optional? default "solid". accepts "solid", "dashed", "dotted" as values
thumbnailOutlineOffset number: optional? default 1. set the offset of the outline from the thumbnail, ie. how far away
borderRadius number: optional? default 10. set the border-radius of the carousel

Package bundled using Rollup.js

Package Sidebar

Install

npm i devsgnr-carousel

Weekly Downloads

3

Version

1.3.0

License

MIT

Unpacked Size

26.1 kB

Total Files

19

Last publish

Collaborators

  • devsgnr_