@mycujoo/mcls-components-banner-slider v1.0.1

MCLS Banner Slider Component

The hero banner slider 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 key
• bannerSetId (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 banners
• onSlideClick (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 background
• slide - for slide configuration that allows customisation for the default slider like:
  • primaryText: object of css properties for styling the banner's primary text
  • secondaryText: object of css properties for styling the banner's secondary text
  • button: object of css properties for styling the banner's button text
  • height: css property for setting the banner height
  • contentAlign: one of top, center and bottom for specifing where to align the banner content
  • padding: 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 and dots: object with:
    • align property of the following shape:
      • horizontal: left, right and center
      • vertical: top, bottom and center
    • size: css value for width and height
    • color: css value for color
• slickSettings: react-slick configuration

Example of usage:

import BannerSlider from '@mycujoo/mcls-components-banner-slider'
import YourSlide from '../slide'
...

  <BannerSlider
    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" />,
      }
    }} 
    />