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"
    />
  );
};