README
React Hero Carousel
Features
Inspired by Supersized jQuery slideshow plugin, the React Hero Carousel aims to be a bold, no-config hero banner carousel for landing pages implemented without external dependencies in React.
- Cross-fade between slides
- CSS-only transitions
- No keyboard controls
- Zero-config
Getting Started
Prerequisites
Besides requiring React, this build also expects support for CSS Modules.
It's also recommended to include a CSS Reset to avoid positioning issues.
Installation
Using NPM
npm install react-hero-carousel
Using Yarn
yarn add react-hero-carousel
Usage
For all examples with source, see the demo.
Zero-config
import React from "react";
import HeroCarousel from "react-hero-carousel";
export default () => (
<HeroCarousel>
<img
src="https://placem.at/places?w=1920&h=1080&seed=1&txt=1"
width="100%"
height="100%"
/>
<img
src="https://placem.at/places?w=1920&h=1080&seed=2&txt=2"
width="100%"
height="100%"
/>
<img
src="https://placem.at/places?w=1920&h=1080&seed=2&txt=2"
width="100%"
height="100%"
/>
</HeroCarousel>
);
Custom Interval (milliseconds)
Must be at least 1200 ms
<HeroCarousel interval={8000}>{/* slides */}</HeroCarousel>
Custom Height
Default height uses 100vh
, custom value can be any valid CSS value
<HeroCarousel height="80em">{/* slides */}</HeroCarousel>