@mycujoo/mcls-components-slider
v1.0.0-rc.9
Published
The Slider component is a customizable carousel/slider component that displays a collection of items/cards in a horizontal scrollable container. It provides options for sorting, loading more items, and handling user interactions.
Downloads
28
Maintainers
Keywords
Readme
Slider
The Slider component is a customizable carousel/slider component that displays a collection of items/cards in a horizontal scrollable container. It provides options for sorting, loading more items, and handling user interactions.
This is intended to be used inside an mcls list data provider like: Events Context or Packages Context.
Please check these CodeSandbox examples.
Props:
data
(optional): An array of T[] representing the items to be displayed in the slider.card
: A JSX.Element representing the item/card component to be rendered in the slider. The component should accept the data and lang props.preloadCard
(optional): A JSX.Element representing the preload card to be displayed while loading.title
(optional): A string or ReactNode representing the title of the slider. config (optional): An object specifying the configuration options for the slider appearance and behavior.lang
(optional): A value from the SupportedLanguages enum to determine the language used in the component.onSeeAll
(optional): A function called when the see all action is triggered.maxCards
(optional): The maximum number of cards to display in the slider.className
(optional): An additional CSS class name to be applied to the slider.
This can be used with Simple cards, Event cards or any other type of card.
Example of usage:
import { Slider } from '@mycujoo/mcls-components-slider'
import { SimpleCard, PreloadCard } from '@mycujoo/mcls-components-card'
const config = {
title: {
// Customize the title text styles
},
seeAll: {
// Customize the "See All" text styles
},
layout: {
marginTop: 10, // Set the top margin of the slider
marginBottom: 20, // Set the bottom margin of the slider
gutter: 10, // Set the spacing between cards
fullBleed: true, // Set the cards to occupy the full width of the slider
},
arrows: {
// Configure the arrow styles and behavior
},
hideWhenEmpty: false, // Hide the slider when there are no items
sort: {
by: 'title', // Sort the items by 'title', 'start_time', or 'popularity'
direction: 'asc', // Set the sort direction ('asc' or 'desc')
},
cardsHover: {
// Configure the hover effect for the cards
},
preloadCard: {
// Configure the appearance of the preload card
},
};
const MySlider = () => {
return (
<Slider
data={/* Array of data */}
card={<SimpleCard />}
preloadCard={<PreloadCard />}
title="Slider Title"
config={config}
lang="en"
onSeeAll={() => {console.log("See all click")}}
maxCards={5}
className="my-slider"
/>
);
};