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>