@mycujoo/mcls-components-carousel
v1.0.6
Published
This npm package has been renamed to [`@mycujoo/mcls-components-banner-slider`](https://www.npmjs.com/package/mcls-components-banner-slider). Please use the new package for future updates and installations.
Downloads
9
Maintainers
Keywords
Readme
Package Renaming Notice
This npm package has been renamed to @mycujoo/mcls-components-banner-slider
. Please use the new package for future updates and installations.
MCLS Carousel Component
The carousel is a configurable react component that uses react-slick
slider and populates it with data from MCLS.
Please check this CodeSandbox example.
Carousel component
Props:
publicKey
(required): A string representing your ogranization public keybannerSetId
(required): A string representing the unique identifier for the banner set that contains the items to be displayed in the slider.className
(optional): A string representing additional CSS classes to be applied to the main slider container, allowing for custom styling.config
(optional): An object that holds configuration settings for the carousel slider. This includes properties like slide text formatting, autoplay, autoplaySpeed, infiniteLoop, etc., to control the slider behavior.onData
(optional): A function with one parameters data that is the list of bannersonSlideClick
(optional): A callback function that will be triggered when a slide is clicked. It receives two parameters: slideIndex (number) - the index of the clicked slide, and slide (SliderBanner) - the data object representing the clicked slide.onSlideButtonClick
(optional): A callback function that will be triggered when a slide's button is clicked. It receives two parameters: slideIndex (number) - the index of the slide containing the clicked button, and slide (SliderBanner) - the data object representing the slide.onSlideChange
(optional): A callback function that will be triggered when the active slide changes. It receives two parameters: slideIndex (number) - the index of the newly active slide, and slide (SliderBanner) - the data object representing the newly active slide.slide
(optional): A functional component (FC) representing the custom JSX element that will be rendered for each slide. The component should accept the SlideProps prop type, which allows passing data to the slide component.
Carousel configuration
The configuration object consists of 4 properties:
mobileBreakpoint
- max number of screen width (in pixels) for displaying the mobile backgroundslide
- for slide configuration that allows customisation for the default slider like:primaryText
: object of css properties for styling the banner's primary textsecondaryText
: object of css properties for styling the banner's secondary textbutton
: object of css properties for styling the banner's button textheight
: css property for setting the banner heightcontentAlign
: one of top, center and bottom for specifing where to align the banner contentpadding
: Css padding value or a pair of padding values (first for mobile slides, and second for others devices)
navigation
- for slider navigation configuration of the arrows and the dots:arrows
anddots
: object with:align
property of the following shape:horizontal
: left, right and centervertical
: top, bottom and center
size
: css value for width and heightcolor
: css value for color
slickSettings
: react-slick configuration
Example of usage:
import Carousel from '@mycujoo/mcls-components-carousel'
import YourSlide from '../slide'
...
<Carousel
publicKey="YOUR_ORG_TOKEN" // mandatory
bannerSetId="BANNER_SET_ID" // mandatory
slider={YourSlide}
config={{
mobileBreakpoint: '320px'
slide: {
height: '70vh',
primaryText: {
color: '#E55',
},
secondaryText: {
color: '#EF5',
},
contentAlign: 'bottom',
},
navigation: {
arrows: {
color: '#FFF'
align: {
vertical: 'bottom',
horizontal: 'right',
},
size: '2.5rem'
},
dots: {
color: '#FFF'
align: {
vertical: 'bottom',
horizontal: 'right',
},
size: '4px'
}
},
slickSettings: {
autoplay: true,
autoplaySpeed: 10000,
lazyLoad: 'ondemand',
dots: true,
infinite: true,
arrows: true,
touchMove: true,
fade: true,
accessibility: true,
draggable: true,
slidesToShow: 1,
cssEase: 'cubic-bezier(.04,.98,.61,1)',
speed: 500,
prevArrow: <YourCustomArrow direction="prev" />,
nextArrow: <YourCustomArrow direction="next" />,
}
}}
/>