easy-carousal

1.0.1 • Public • Published

hub-easy-carousal

An 'Easy' to use responsive react bootstrap carousal component. Basically turns everything it wraps into Carousal items, it's that 'Easy'

installation

npm i hub-easy-carousal

Dependancies

The component if built with bootstrap and react-icon and should install them along with the package if they are not already installed in your project.

  1. Bootstrap
npm i bootstrap
  1. React-Icons
npm i react-icons

Usage

props

Takes two optional props to show hints/text, 'hint'will take a string of text show show a normal hint/text, 'boldHint' will also take a string of text and will output a bold hint/text.

<EasyCarousal hint='Nornal text' boldHint='Bold text'>{children}</EasyCarousal>

import package and wrap carousel items between &

import EasyCarousal from 'hub-easy-carousal';
// a slide object contains the image link, title and function/click event for when a user clicks on a card

  <EasyCarousal hint='What are you' boldHint='here to do?'>
    <div className="items full-width text-center">
        <h1 className="product">1</h1>      
    </div>

    <div className="items full-width text-center">
        <h1 className="product">2</h1>      
    </div>

    <div className="items full-width text-center">
        <h1 className="product">3</h1>      
    </div>

    <div className="items full-width text-center">
        <h1 className="product">4</h1>      
    </div>

    <div className="items full-width text-center">
        <h1 className="product">5</h1>      
    </div>
  </EasyCarousal>

Preview

Alt text

Readme

Keywords

none

Package Sidebar

Install

npm i easy-carousal

Weekly Downloads

0

Version

1.0.1

License

none

Unpacked Size

17.9 kB

Total Files

15

Last publish

Collaborators

  • romeo-dot-dev