@merchantlabs/react-carousel

Install

npm install --save @merchantlabs/gatsby-image-loader

How to use

This is what a component using react-carousel looks like:

import React from "react";
import { Carousel } from "@merchantlabs/react-carousel";
import Slide from "./Slide";

const slides = [
  {
    title: 'Software Engineering',
    subTitle: 'for the modern web.',
    buttonText: 'LEARN MORE',
    path: '/'
  },
  {
    title: 'Technical Expertise',
    subTitle: 'Fueled by innovation.',
    buttonText: 'WORK WITH US',
    path: '/'
  },
  {
    title: 'Web App Development',
    subTitle: 'Built on modern frameworks.',
    buttonText: 'OUR DEV PROCESS',
    path: '/'
  }
]

export default () => (
  <Carousel
    slides={slides}
    interval={8000}
    buttonComponent={Carousel.Button}
    dotComponent={Carousel.Dot}
    slideRenderer={slideProps => <Slide {...slideProps} />}
  />
)

react-carousel props

| Name | Type | Description | | ---- | ---- | ------------- | | slides | array<any> | Required Array of strings or objects, each item in item in the array should have the same type or shape because each gets passed to the slideRenderer function individually. | | slideRenderer | func| Required Function that will receive an item in the slides array and return a react component | | dotComponent | func| Required styled-component that will be used as slide navigation at the bottom of the carousel | | buttonComponent | func| Required Same as dotComponent except this is the arrows that show up on either side of the carousel | | interval | number| Time in milliseconds between the slide moving | | className | string| className passed to the component that wraps the rendered slide | | autoPlay | bool| Whether or not the carousel should autoplay |