react-carousel-cyt
v1.0.1
Published
Customizable React Carousel Component
Downloads
8
Maintainers
Readme
react-carousel-cyt
Customizable React Carousel Component
Install
npm install --save react-carousel-cyt
Usage
import React from 'react'
import Carosel from 'react-carousel-cyt'
const App = () => {
return (
<div style={{ width: '100vw' }}>
<Carousel
// imgs attribute is essential
imgs={['favicon.ico', 'favicon.ico', 'favicon.ico', 'favicon.ico']}
imgRatio='2/1'
width='90%'
/>
</div>
)
}
props
/**
* @prop {width} Carousel with | string | "100%" or "500px" or "20rem" ...
* @prop {imgs} img url array | [string] | ["url","url","url"...]
* @prop {imgRatio} img aspectRatio | string | "1/2" or "16/9" ...
* @prop {imgWidth} img width | string | "24px" or "50%" or "12rem" ...
* @prop {imgObjectFit} img objectFit | string | "cover" or "contain" ...
* @prop {imgBorder} img border | string | "solid black 2px" ...
* @prop {imgRadius} img borderRadius | string | "2px" or "0.5rem" ...
* @prop {isDot} dot btn boolean | boolean | true or false
* @prop {dotColor} dot base color | string | "red" or "#ff8e0d"...
* @prop {dotColorSelected} dot selected color | string | "red" or "#ff8e0d"...
* @prop {dotSize} dot size | string | "12px" or "1rem" ...
* @prop {gap} gap between imgs, dots and description | string | "12px" or "1rem" ...
* @prop {isArrow} arrow btn boolean | boolean | true or false
* @prop {arrowColor} arrow color | string | "red" or "#ff8e0d"...
* @prop {arrowDisabledColor} arrow disabled color | string | "grey" or "#000000"
* @prop {arrowSize} arrow size | string | "12px" or "1rem" ...
* @prop {descriptions} descriptions array(same length with imgs array) for imgs | [string] | ["img1 ~~", "img2 ~~", "img3 ~~"]
* @prop {descriptionSize} descriptions size | string | "12px" or "1rem" ...
* @prop {descriptionColor} descriptions color | string | "red" or #ff8e0d...
*/
default value
function Carousel({
imgs = [],
imgRatio = '1/1',
imgWidth = '90%',
imgObjectFit = 'contain',
imgBorder = '',
imgRadius = '',
isDot = true,
dotColor = 'black',
dotColorSelected = '#ff8e0d',
dotSize = '1.5rem',
gap = '0.5rem',
isArrow = true,
arrowColor = '#ff8e0d',
arrowDisabledColor = 'grey',
arrowSize = '1.5rem',
descriptions,
descriptionSize = '1.5rem',
descriptionColor = '#ff8e0d'
}) {
// logics
return 'Carousel Component'
}
License
MIT © 10yutae29