Novelty Polygonal Mathematics

    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

    Install

    npm i devsgnr-carousel

    DownloadsWeekly Downloads

    1

    Version

    1.3.0

    License

    MIT

    Unpacked Size

    26.1 kB

    Total Files

    19

    Last publish

    Collaborators

    • devsgnr_