{"id":15608197,"url":"https://github.com/rmolinamir/hero-slider","last_synced_at":"2025-04-07T06:07:14.252Z","repository":{"id":44882825,"uuid":"179720794","full_name":"rmolinamir/hero-slider","owner":"rmolinamir","description":"A hero slider component. Includes autoplay, touch swiping, multiple navs, event callbacks, and more.","archived":false,"fork":false,"pushed_at":"2024-09-28T03:27:39.000Z","size":31987,"stargazers_count":109,"open_issues_count":4,"forks_count":24,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-28T00:13:21.962Z","etag":null,"topics":["carousel","hero-slider","react","slide","slider"],"latest_commit_sha":null,"homepage":"https://rmolinamir.github.io/hero-slider/?path=/story/example-hero-slider--basic","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rmolinamir.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":"ROADMAP.md","authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-04-05T16:50:48.000Z","updated_at":"2025-03-24T20:33:31.000Z","dependencies_parsed_at":"2024-06-18T19:57:27.561Z","dependency_job_id":"32cbc08c-cf67-42ff-b71e-8c5b0ae6517d","html_url":"https://github.com/rmolinamir/hero-slider","commit_stats":{"total_commits":122,"total_committers":3,"mean_commits":"40.666666666666664","dds":"0.016393442622950838","last_synced_commit":"0725ba21396e0079d60b38e4f02e67ef8f6397db"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rmolinamir%2Fhero-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rmolinamir%2Fhero-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rmolinamir%2Fhero-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rmolinamir%2Fhero-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rmolinamir","download_url":"https://codeload.github.com/rmolinamir/hero-slider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247601447,"owners_count":20964864,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["carousel","hero-slider","react","slide","slider"],"created_at":"2024-10-03T05:06:35.205Z","updated_at":"2025-04-07T06:07:14.217Z","avatar_url":"https://github.com/rmolinamir.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# hero-slider\n\n\u003e This package contains multiple components with a fair range of options to help developers quickly set up a hero slider.\n\n[![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg)](https://rmolinamir.github.io/hero-slider/?path=/story/example-hero-slider--basic) [![NPM](https://img.shields.io/npm/v/hero-slider.svg)](https://www.npmjs.com/package/hero-slider) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) [![gzip size](https://img.shields.io/badge/gzip%20size-11.6kB-brightgreen.svg)](https://unpkg.com/hero-slider@latest/dist/index.es.js)\n\n---\n\n## Introduction\n\nThis package contains multiple components with a fair range of options to help developers quickly set up a hero slider. You can set the sliding animations, the background lazy loaded image animation, navs, buttons, callbacks, and even set your own buttons if you need to.\n\nThe idea behind the configurability was to set up clear boundaries between *modules* and *components*. The modules will control the behavior of the `hero-slider`, while the components themselves are self explanatory and mostly relevant to styling. The documentation will be divided in two main sections, `Module`, and `Components`.\n\n[![Edit Hero Slider](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/z6kky9oy63?fontsize=14)\n\n![Navbar Slider](https://media.giphy.com/media/KeW8omQCSShZdNQMuy/giphy.gif)\n![Basic Slider](https://media.giphy.com/media/WpNrWjYJxCrl4O8btw/giphy.gif)\n![Zoom Slider](https://media.giphy.com/media/dXG2hB3AtPg976vCE5/giphy.gif)\n![Vertical Slider](https://media.giphy.com/media/kyXfZuna1AUWGrUlog/giphy.gif)\n\n---\n\n## Modules\n\nThe modules are clear boundaries that define the overall behavior of the `HeroSlider` component. You can configure these behaviors by passing the respective props to the `HeroSlider`.\n\n### Controller\n\nThis module will define the behavior slide transitions. You can set up the duration of the transitions, delays before the transitions begin, the initial active slide, callbacks for the transition events, and pointers to methods that will slide to the previous or next slides relative to the active slide.\n\n```ts\ninterface ControllerProps {\n  /**\n   * Sliding duration, in milliseconds.\n   * @default 500\n   */\n  slidingDuration?: number;\n  /**\n   * Sliding delay, in milliseconds.\n   * @default 200\n   */\n  slidingDelay?: number;\n  /**\n   * The initial slide can also be set, but the slider starts at the first slide by default.\n   * @default 1\n   */\n  initialSlide?: number;\n  /**\n   * Callback executed before sliding begins.\n   * The previous and next slide numbers are received as arguments, since the sliding event can be delayed, this is useful to handle state changes from the outside (e.g. fire custom animations inside the active slide).\n   * @param activeSlide\n   * @param nextSlide\n   * @default undefined\n   */\n  onBeforeSliding?(activeSlide: number, nextSlide: number): void;\n  /**\n   * Callback executed once the sliding starts similar to `onBeforeSliding`.\n   * @param activeSlide\n   * @param prevSlide\n   * @default undefined\n   */\n  onSliding?(activeSlide: number, prevSlide: number): void;\n  /**\n   * Callback executed after the sliding ends similar to `onBeforeChange`.\n   * @param activeSlide\n   * @param prevSlide\n   * @default undefined\n   */\n  onAfterSliding?(activeSlide: number, prevSlide: number): void;\n  /**\n   * Similar to pointers in C++, objects can work like pointers in JavaScript. React references are mutable objects that can be changed but will always point to an origin. If you declare an `object` and pass it as a reference, then the `current` property of the React reference `object` will be set to be equal to the `goToNextSlide` handler within the slider. This provides the developer with a way to change the slides \"from the outside\" of the bounds of the HeroSlider component.\n   */\n  goToNextSlidePointer?: React.MutableRefObject\u003cGoToNextSlide | undefined\u003e;\n  /**\n   * Similar to `nextSlide`, this sets the `object` to be equal to the `goToPreviousSlide` handler within the HeroSlider component.\n   */\n  goToPreviousSlidePointer?: React.MutableRefObject\u003c\n    GoToPreviousSlide | undefined\n  \u003e;\n}\n```\n\n### Animations\n\nDefines which sliding animations will be used during slide transitions.\n\n```ts\ninterface AnimationsProps {\n  /**\n   * The sliding animations during transitions.\n   * @default 'wipe'\n   */\n  slidingAnimation?: 'fade' | 'wipe';\n  /**\n   * Fade in duration of the slider during mount, in milliseconds.\n   * @default 100\n   */\n  sliderFadeInDuration?: number;\n  /**\n   * Navbars fade in duration, in milliseconds.\n   * @default 1000\n   */\n  navbarFadeInDuration?: number;\n  /**\n   * Navbars fade in delay, in milliseconds.\n   * @default 500\n   */\n  navbarFadeInDelay?: number;\n  /**\n   * When `true`, the `hero-slider` will know which animation should be set next.\n   * For example, if the user is selecting the next slide, the animation would be different to the one if the user had selected the previous slide.\n   * The animations will essentially be the same, but moving to different directions (e.g. left or right, or right to left).\n   * @default true\n   */\n  shouldManageAnimationSequence?: boolean;\n}\n```\n\n### Autoplay\n\nAutoplay is a feature that the Slider will support if enabled, it is disabled by default. The autoplay will activate a slide transition periodically after a certain duration, and a debounce will happen every time the user interacts with the Slider. The debounce duration can also be configured.\n\n```ts\ninterface Props {\n  /**\n   * Autoplay duration, interval or duration betweens slide transitions, in milliseconds.\n   * If it's lower than the sliding cycle duration (sliding duration + sliding delay), then the sliding cycle duration will be used instead.\n   * @default 8000\n   */\n  autoplayDuration?: number;\n  /**\n   * Time (in milliseconds) in which the autoplay will be debounced if the user interacts with the slider.\n   * The autoplay resumes if the user stops interacting after this duration.\n   * Set as 0 to disable this feature.\n   * @default 4000\n   */\n  autoplayDebounce?: number;\n}\n\ntype AutoplayProps = Props | boolean;\n```\n\n### Accessibility\n\nHandles accessibility behaviors such as the orientation of the Slider (which affects the swipe motions used to command slide transtisions), and whether to render next and previous buttons.\n\n```ts\n/**\n * `AccessibilityOrientation` definition used for the `SliderProps.orientation` prop.\n * Used to define which swipes (depending on directions) will change the slides,\n * and where and how will the buttons render, if set to render.\n */\nenum AccessibilityOrientation {\n  VERTICAL = 'vertical',\n  HORIZONTAL = 'horizontal'\n}\n\ninterface AccessibilityProps {\n  /**\n   * Controls render of the next and previous buttons.\n   * @default true\n   */\n  shouldDisplayButtons?: boolean;\n  /**\n   * When an arrow key is pressed, the active slide will change respectively to the pressed arrow.\n   * The left and down arrows will set the previous slide, and the right and up arrows will set the next slide.\n   * The left and right will only work if the slider is horizontal, and the up and down arrows will only work if the slider is vertical.\n   * @default true\n   */\n  shouldSlideOnArrowKeypress?: boolean;\n  /**\n   * The slider orientation can either set to be `horizontal` or `vertical`.\n   * The orientation sets the slide buttons respective to the orientation (e.g. if vertical, the buttons will be at the top and at the bottom).\n   * Swipe (touch) gestures in mobile devices to change slides will also be configured automatically depending on the orientation (e.g. if horizontal, swiping vertically won't change slides).\n   * @default 'horizontal'\n   */\n  orientation?: `${AccessibilityOrientation}`;\n  /**\n   * Pixel threshold for the Slider to register a swiping command to change slides.\n   * @default 50\n   */\n  thresholdToSlide?: number;\n}\n```\n\n### Settings\n\nThe settings will allow you to set up CSS variables that will be available to HTML elements inside the slider, as well as debugging levels in case you are running into problems.\n\n```ts\ninterface SettingsProps {\n  /**\n   * Sets up the `--slider-color` CSS variable.\n   * @default 'inherit'\n   */\n  sliderColor?: CSS.Properties['color'];\n  /**\n   * Inline CSS styling for the wrapper div element of the component.\n   * @default {}\n   */\n  sliderStyle?: Omit\u003cCSS.Properties, 'width' | 'height'\u003e;\n  /**\n   * Aesthetics settings. You can configure the base color and the active color of all nav components within the `HeroSlider`. They can be set individually as well.\n   * @default\n   * {\n   *    color: undefined,\n   *    activeColor: undefined\n   * }\n   */\n  navbarStyle?: {\n    color?: CSS.Properties['color'];\n    activeColor?: CSS.Properties['color'];\n  };\n  /**\n   * Debugger logs level. Only useful if you need insights.\n   * @default\n   * {\n   *    verbose: false,\n   *    info: false,\n   *    debug: false,\n   *    warnings: true,\n   *    errors: true\n   * }\n   */\n  debug?: LoggerLevels | undefined;\n}\n```\n\n### Manager\n\nThe `Manager` will handle the `Slide` components and perform other processes behind the scenes. You can optionally set up whether the user is on a mobile device, but this will default to a standard navigator validation.\n\n```ts\ninterface ManagerProps {\n  /**\n   * Determines if on a mobile device. If true, the control buttons at the sides of the slider won't render.\n   * @default /Mobi|Android/i.test(navigator.userAgent)\n   */\n  isMobile?: boolean;\n}\n```\n\n---\n\n## Components\n\nThis package offers multiple components. Below you will find instructions for each component and their respective `props`.\n\n### HeroSlider\n\nThe main component and default of the package. The `HeroSlider` has wrap all of the other components, otherwise you will run into errors due to a lack of Context providers.\n\n`HeroSlider` accepts the following props:\n\n```ts\n/**\n * `HeroSlider` props.\n */\ninterface HeroSliderProps {\n  /**\n   * Slider className.\n   */\n  className?: React.HTMLProps\u003cHTMLDivElement\u003e['className'];\n  /**\n   * CSS property. Defines the width of the slider.\n   * @default '100%'\n   */\n  width?: React.CSSProperties['width'];\n  /**\n   * CSS property. Defines the height of the slider.\n   * @default '100vh'\n   */\n  height?: React.CSSProperties['height'];\n  /**\n   * Inline CSS styling.\n   */\n  style?: Omit\u003cReact.CSSProperties, 'width' | 'height'\u003e;\n\n  // Modules\n  manager?: ManagerProps;\n  settings?: SettingsProps;\n  controller?: ControllerProps;\n  accessibility?: AccessibilityProps;\n  animations?: AnimationsProps;\n  autoplay?: AutoplayProps;\n}\n```\n\n#### Example\n\n```tsx\n\u003cHeroSlider\n  height=\"100vh\"\n  autoplay\n  controller={{\n    initialSlide: 1,\n    slidingDuration: 500,\n    slidingDelay: 100,\n    onSliding: (nextSlide: number) =\u003e\n      console.debug('onSliding(nextSlide): ', nextSlide),\n    onBeforeSliding: (previousSlide: number, nextSlide: number) =\u003e\n      console.debug(\n        'onBeforeSliding(previousSlide, nextSlide): ',\n        previousSlide,\n        nextSlide\n      ),\n    onAfterSliding: (nextSlide: number) =\u003e\n      console.debug('onAfterSliding(nextSlide): ', nextSlide)\n  }}\n\u003e\n...\n```\n\n### HeroSlider Slide\n\nThe `Slide` component holds whatever children you want to be part of each slide, you can also modify the background and its initial mount animation. Bear in mind that background images are lazy loaded.\n\nThe `Slide` component accepts the following props:\n\n```ts\n/**\n * `Slide` component props.\n */\ninterface SlideProps {\n  /**\n   * Slider className.\n   */\n  className?: React.HTMLProps\u003cHTMLDivElement\u003e['className'];\n  /**\n   * Each slide has a \"Mask\" that serves as an adornment.\n   * They mimic the background, then offsets it a bit. It has an animation during slide transitions.\n   * @default false\n   */\n  shouldRenderMask?: boolean;\n  /**\n   * Defines the background of the `Slide`.\n   * You may pass CSS properties just like you would style the background of a regular HTML element.\n   * The main difference is that the `backgroundImage` property will work just like an image `src` property instead of the typical background image URL.\n   */\n  background?: Partial\u003cBackgroundProps\u003e;\n  /**\n   * If the developer is using a `MenuNav` or `ButtonsNav` component, a label for each slide may be passed.\n   * These labels will be shown in the nav components.\n   */\n  label?: string;\n  /**\n   * Inline CSS styling.\n   */\n  style?: React.CSSProperties;\n  /**\n   * Callback that executes when the background image loads.\n   */\n  onBackgroundLoad?: BackgroundProps['onLoad'];\n}\n```\n\n#### Slide Background prop\n\nThe background of the `Slide` components can be configured just as you would configure the background of any element, with the added bonus of lazy loading and being able to pass data to the `alt` image attribute.\n\n```ts\n/**\n * Type definition for `BackgroundProps.backgroundAnimation`.\n */\nenum BackgroundAnimation {\n  FADE = 'fade',\n  ZOOM = 'zoom'\n}\n\n/**\n * `BackgroundProps` interface for the `Background` JSX\n * component's props used inside the `Slide` components.\n * The `Slide` components `background` prop is also defined\n * by `BackgroundProps`.\n */\ninterface BackgroundProps {\n  /**\n   * CSS property. Defines the width of the background.\n   * @default '100%'\n   */\n  width?: CSS.Properties['width'];\n  /**\n   * CSS property. Defines the height of the background.\n   * @default '100%'\n   */\n  height?: CSS.Properties['height'];\n  backgroundColor?: CSS.Properties['backgroundColor'];\n  backgroundAnimationDuration?: CSS.Properties['animationDuration'];\n  backgroundAnimationDelay?: CSS.Properties['animationDelay'];\n  /**\n   * Background animation after the image loads.\n   * There are currently two options, a fade-in animation, or a zoom in animation that lasts 30 secs, the background zooms in until it reaches its original size.\n   * @default 'fade'\n   */\n  backgroundAnimation?: `${BackgroundAnimation}`;\n  /**\n   * Background blend mode CSS property **for the optional mask that could render in each of the Slide components**.\n   */\n  maskBackgroundBlendMode?: CSS.Properties['backgroundBlendMode'];\n  /**\n   * Background image.\n   */\n  backgroundImageClassName?: HTMLImageElement['sizes'];\n  backgroundImageBlendMode?: CSS.Properties['mixBlendMode'];\n  backgroundImageSizes?: HTMLImageElement['sizes'];\n  backgroundImageSrcSet?: HTMLImageElement['srcset'];\n  backgroundImageSrc?: HTMLImageElement['src'];\n  backgroundImageAlt?: HTMLImageElement['alt'];\n  backgroundImageStyle?: React.CSSProperties;\n  /**\n   * Boolean variable to allow or disable lazy loading.\n   * @default true\n   */\n  shouldLazyLoad?: boolean;\n  onLoad?: (event: React.SyntheticEvent\u003cHTMLImageElement, Event\u003e) =\u003e void;\n}\n```\n\n#### Slide Example\n\n```tsx\n\u003cSlide\n  background={{\n    backgroundImage: salta\n  }}\n\u003e\n  \u003cdiv\u003eSalta - Argentina\u003c/div\u003e\n\u003c/Slide\u003e\n```\n\n### Nav\n\nThe basic `Nav` component, worth noting that there are three other types of (slide) navigation components named `SideNav`, `MenuNav`, and `ButtonsNav`. This component is nothing more than a nagivation bar. By default the component is positioned at the bottom, centered.\n\n```ts\n/**\n * Defines the position of the navigation component.\n */\ninterface NavPosition {\n  top?: React.CSSProperties['top'];\n  left?: React.CSSProperties['left'];\n  bottom?: React.CSSProperties['bottom'];\n  right?: React.CSSProperties['right'];\n  transform?: React.CSSProperties['transform'];\n}\n\n/**\n * `Nav` component props.\n */\ninterface NavProps {\n  /**\n   * Object of CSS properties `top`, `left`, `bottom`, and `right` used to absolutely position elements.\n   * Aside from the former, you can also set the CSS `transform` property to help you center the element.\n   * @default\n   * {\n   *    bottom: '1.5rem',\n   *    left: '50%',\n   *    transform: 'translateX(-50%)'\n   * }\n   */\n  position?: NavPosition;\n  /**\n   * Defines `--nav-color` CSS variable.\n   */\n  color?: string;\n  /**\n   * Defines `--nav-active-color` CSS variable.\n   */\n  activeColor?: string;\n}\n```\n\n#### NavPosition\n\nThe position settings are nothing more than the `top`, `left`, `bottom`, and `right` CSS properties used by absolutely position elements. Aside from the former, you can also set the CSS `transform` property to help you position the element.\n\n#### NavExample\n\n```tsx\n\u003cHeroSlider\n  ...\n\u003e\n  ...\n\n  \u003cSlide\n    ...\n  /\u003e\n\n  \u003cSlide\n    ...\n  /\u003e\n\n  \u003cNav /\u003e\n\u003c/HeroSlider\u003e\n```\n\n### SideNav\n\nWhen it comes to props it extends the props of the `Nav` component. There are a couple more props that can be passed to this component. Aside from that, it's worth mentioning that this component is intented to be placed at the sides of the slider.\n\n```ts\n/**\n * `SideNav` component props.\n */\ninterface SideNavProps extends NavProps {\n  /**\n   * Defines the inline CSS property `right` of the component.\n   */\n  right?: React.CSSProperties['right'];\n  /**\n   * Defines the inline CSS property `left` of the component.\n   */\n  left?: React.CSSProperties['left'];\n  /**\n   * Defines the position. If you set it to the left, set this to false to disable any existing `right` CSS properties and avoid any conflicts.\n   * @default true\n   */\n  isPositionedRight?: boolean;\n  /**\n   * Object of CSS properties `top`, `left`, `bottom`, and `right` used to absolutely position elements.\n   * Aside from the former, you can also set the CSS `transform` property to help you center the element.\n   * @default\n   * {\n   *    bottom: undefined,\n   *    top: '50%',\n   *    left: !isPositionedRight ? left || '1rem' : undefined,\n   *    right: isPositionedRight ? right || '1rem' : undefined,\n   *    transform: 'translateY(-50%)'\n   * }\n   */\n  position?: NavPosition;\n}\n```\n\n#### SideNav Example\n\nThis example would render two `SideNav` components at both sides of the screen:\n\n```tsx\n\u003cHeroSlider\n  ...\n\u003e\n  ...\n\n  \u003cSlide\n    ...\n  /\u003e\n\n  \u003cSideNav\n    isPositionedRight={false}\n    position={{\n      top: '50%',\n      left: '0',\n      transform: 'translateY(-50%)'\n    }}\n  /\u003e\n\n  \u003cSideNav /\u003e\n\u003c/HeroSlider\u003e\n```\n\n### MenuNav\n\nExtends from the `Nav` component, with a few additional props.\n\n```ts\n/**\n * `MenuNav` component props.\n */\ninterface MenuNavProps extends NavProps {\n  /**\n   * Determines how the browser distributes space between and around nav items along the component.\n   */\n  justifyContent?: React.CSSProperties['justifyContent'];\n  /**\n   * Given the nature of this component, it doesn't work well with devices of relatively small width.\n   * The mobile threshold is the point in which this component turns into a basic `Nav` component or `null`.\n   */\n  mobileThreshold?: number;\n  /**\n   * Determines if the nav should render `null` or a basic `Nav` component after the threshold is reached.\n   * @default false\n   */\n  isNullAfterThreshold?: boolean;\n  /**\n   * An extra button rendered among the nav items in case the developer may want any extra functionality in the component.\n   */\n  extraButton?: React.ReactNode;\n  /**\n   * Renders the button to the right side of the nav if true, otherwise it will appear at the left side.\n   * @default true\n   */\n  isExtraButtonRight?: boolean;\n}\n```\n\n#### MenuNav Example\n\n```tsx\n\u003cHeroSlider\n  ...\n\u003e\n  ...\n\n  \u003cSlide\n    ...\n  /\u003e\n\n  \u003cMenuNav /\u003e\n\u003c/HeroSlider\u003e\n```\n\n### ButtonsNav\n\nExtends from the previous `MenuNav` component props. It works the same, with the addition of additional props defined as `alignItems` and `backgroundColor`.\nThe `alignItems` prop will align the slide navigation items relative to the Slider.\nThe `backgroundColor` sets the background of the buttons, while the `color` prop is used for the color of the text, and the `activeColor` prop is used for the background of the active navigation item.\n\n```ts\n/**\n * `ButtonsNav` component props.\n */\ninterface ButtonsNavProps extends MenuNavProps {\n  /**\n   * CSS background color property for the nav buttons.\n   */\n  backgroundColor?: React.CSSProperties['backgroundColor'];\n  /**\n   * Aligns the nav items to the center, top, or bottom of its container working exactly as how the CSS flex-box `align-items` property works.\n   */\n  alignItems?: React.CSSProperties['alignItems'];\n}\n```\n\n### AutoplayButton\n\nThe `AutoplayButton` component allows the user to control the behavior of the `Autoplay` module. This button will play or pause the autoplay when clicked. It's really easy to setup.\n\nYou can position it just like you would position a navigation component by using passing the `position` prop, but you may also pass a CSS class or inline styling as props.\n\n```ts\n/**\n * `AutoplayButton` component props.\n */\ninterface AutoplayButtonProps {\n  /**\n   * CSS class name.\n   */\n  className?: React.HTMLAttributes\u003cHTMLElement\u003e['className'];\n  /**\n   * Object of CSS properties `top`, `left`, `bottom`, and `right` used to absolutely position elements.\n   * Aside from the former, you can also set the CSS `transform` property to help you center the element.\n   * @default\n   * {\n   *    bottom: '0',\n   *    left: '0'\n   * }\n   */\n  position?: NavPosition;\n  /**\n   * Inline CSS styling.\n   */\n  style?: React.CSSProperties;\n}\n```\n\n#### AutoplayButton Example\n\n```tsx\n\u003cHeroSlider\n  ...\n\u003e\n  \u003cOverlay\u003e\n    ...\n    \u003cAutoplayButton /\u003e\n  \u003c/Overlay\u003e\n\n  ...\n\u003c/HeroSlider\u003e\n```\n\n### Overlay\n\nThe `Overlay` is a useful component that will superpose its children over the content of the `Slide` components.\n\n```ts\n/**\n * `Overlay` component props.\n */\ninterface OverlayProps {\n  /**\n   * Slider className.\n   */\n  className?: React.HTMLProps\u003cHTMLDivElement\u003e['className'];\n}\n```\n\n#### Overlay Example\n\n```tsx\n\u003cHeroSlider\n  ...\n\u003e\n  \u003cOverlay\u003e\n    \u003cdiv\u003eOn Top of the World\u003c/div\u003e\n  \u003c/Overlay\u003e\n\n  \u003cSlide\n    ...\n  /\u003e\n\n  \u003cNav /\u003e\n\u003c/HeroSlider\u003e\n```\n\n---\n\n## React Server Components\n\nIf you are working with React Server Components (e.g. Next.js), it recommended to import the CSS file of the package to avoid \"popping\" effects when the CSS is loaded. You can do this by importing the `index.css` file from the `hero-slider` package. For example:\n\n```tsx\n'use client';\nimport 'hero-slider/dist/index.css';\nimport HeroSlider, { Nav, Overlay, Slide } from 'hero-slider';\n\nexport default function BasicSlider() {\n  return (\n    \u003cHeroSlider className='h-full w-full'\u003e\n      ...\n    \u003c/HeroSlider\u003e\n  );\n}\n```\n\nIf you don't import the CSS file, the `HeroSlider` component will still work, but the CSS will be loaded after the component is mounted, which will cause a \"popping\" effect.\n\n## Development\n\nThis project is using [Storybook](https://storybook.js.org/) for development. On top of that, it's using Turborepo to manage the monorepo. The project is divided in two main packages, `hero-slider` and `storybook`. The former is the package that contains the `hero-slider` component, and the latter is a package that runs a Storybook instance to showcase the `hero-slider` component, interact, and do manual end-to-end testing.\n\nThe `hero-slider` package is using [Rollup](https://rollupjs.org/) to bundle the code, and [TypeScript](https://www.typescriptlang.org/) to type check the code.\n\nFinally, the project is using [Prettier](https://prettier.io/) and [ESLint](https://eslint.org/) to format and lint the code, [Jest](https://jestjs.io/) for unit testing, and [pnpm](https://pnpm.js.org/) as the package manager.\n\nBelow you will find instructions on how to install, develop, build, and test the project.\n\n### Install\n\nTo install the project, you will need to install [pnpm](https://pnpm.js.org/) first. Then, you can run the following command:\n\n```bash\npnpm i\n```\n\n### Develop\n\nWhen developing, you will need to run the following command:\n\n```bash\npnpm dev\n```\n\nThis will start the Storybook instance and a watcher for the `hero-slider` package.\n\n### Build\n\nTo build the project, you will need to run the following command:\n\n```bash\npnpm build\n```\n\n### Test\n\nTo test the project, you will need to run the following command:\n\n```bash\npnpm test\n```\n\n---\n\n## License\n\nMIT © [rmolinamir](https://github.com/rmolinamir)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frmolinamir%2Fhero-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frmolinamir%2Fhero-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frmolinamir%2Fhero-slider/lists"}