@coudron/hero-slider v2.0.2

This is a fork from rmolinamir/hero-slider. I needed to make some small changes to the container classes.

hero-slider

A hero slider component inline with how you would expect most React components to work. Includes autoplay, lazy loaded backgrounds, support for touch swiping and direction to change slides, multiple navs, settings, memoization, event callbacks, among other features.

Introduction

This package contains multiple components with a fair range of options to help developers quickly set up a hero slider. In short, it functions just how you would expect a package of React components. In short, all you have to do is import the Slider & Slide components. 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. The style and animations were inspired by different sliders from websites such as Lamborghini's, Lonely Planet, Kreativa Studio.

Install

npm install --save hero-slider

Showcase

Hero Slider

Instructions

This package contains multiple exports, each used differently and some similarly. Below you will find instructions for each components and their respective props. Here's a list of all the possible components you may import:

import HeroSlider, {
  Slide,
  Nav,
  SideNav,
  MenuNav,
  ButtonsNav,
  AutoplayButton,
  OverlayContent,
} from 'hero-slider'

HeroSlider

The main component of the package. Also the default export. With this component, none of the other components will work as intended, so be sure to wrap them all inside, you can think of this component as the operations center.

HeroSlider accepts the following props:

HeroSlider animations

Here are the possible slidingAnimation options:

Make sure that the passed prop matches the ones in the table above, for them to be set properly. The default animation are any of the horizontally oriented ones, since smartSliding is true.

HeroSlider settings

Through the settings props, you can configure multiple features of the slider. These settings/features are:

The following are the default settings:

  slidingDuration: 500,
  slidingDelay: 200,
  sliderColor: 'inherit',
  sliderFadeInDuration: 100,
  navbarFadeInDuration: 1000,
  navbarFadeInDelay: 500,
  isSmartSliding: true,
  shouldDisplayButtons: true,
  shouldAutoplay: true,
  shouldSlideOnArrowKeypress: false,
  autoplayDuration: 8000,
  autoplayHandlerTimeout: 1000,
  width: '100%',
  height: '100%',

Nav components settings

The nav components colors can be set from within the HeroSlider settings. These will affect all of the Navs. However, you may individually set a nav component different by passing these very same settings as props to said component.

Slide

The 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.

The Slide component accepts the following props:

Slide background settings

The 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. Here are the allowed settings

The following are the default settings:

  backgroundPosition: 'center top',
  backgroundSize: 'cover',
  width: '100%',
  height: '100%',

Nav

The basic Nav component, there are three other types of nav components named SideNav, MenuNav, and ButtonsNav, there is more detailed information about the three latest below this whole section. The nav component is nothing more than a nagivation bar. The developer may set up three features through props:

1. Position.
2. Color.
3. Active color.

Here is a more detailed table of the props:

Nav position settings

The position settings are nothing more than the top, left, bottom, and right CSS properties used for absolutely position elements. Aside from the former, you can also set the CSS transform property to help you center the element. By default the nav is positioned at the bottom, centered.

The following are the default position settings:

  bottom: '1.5rem'
  left: '50%'
  transform: 'translateX(-50%)'

SideNav

The SideNav component. When it comes to props it's almost entirely equal to 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 nav is intented to be placed at the sides of the slider. Here are the props:

MenuNav

Very similar to the Nav component when it comes to setup, with the addition of four more props. The following table contains their definitions:

ButtonsNav

Very similar to the previous MenuNav component when it comes to setup. This component accepts the same props as the MenuNav component and works exactly the same, with the addition of an two extra props defined as alignItems and backgroundColor. The alignItems prop will align the nav items to the center, top or bottom of its container working exactly as how the CSS flex-box align-items property works, accepting flex-start (top), center, and flex-end (bottom) as possible values, the default setting is flex-end, set at the bottom. The 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 nav item. Here is a more detailed table:

AutoplayButton

The AutoplayButton component comes in handy whenever the hero slider is set up to autoplay. This button will play or pause the autoplay instance respectively upon clicking it. It's really easy to setup. The button is an SVG image, which means it will scale well to any width or height. The button has to be in the first level of the HeroSlider childrens, just like a Slide component would be. If you want to place it somewhere else, you may use a React portal.

You can position it just like you would position a nav component by using passing the position prop, but you may also pass a CSS class or inline styling as props. Here is a more detailed table explaining the props:

OverlayContainer

The OverlayContainer component is a simple pre-styled styled.div component that you can use to place whatever content that you want to overlay over the hero-slider, e.g. headers, without any of the slides overlapping it.

License

MIT © rmolinamir