Styled Components Carousel

A simple React Carousel component written in Typescript and built with styled-components using React Hooks.

Heavily inspired by react-slick with a simplified API and small behaviour changes.

Getting Started

Prerequisites

This component expects that you will have the following packages installed:

• styled-components
• react

Installation

NPM

npm install styled-components-carousel

Yarn

yarn add styled-components-carousel

Examples

Basic Usage

import Carousel from 'styled-components-carousel';
 
const Example = () => (
    <Carousel
        center
        infinite
        showArrows
        showIndicator
        slidesToShow={3}
    >
        <div>
            <span>1</span>
        </div>
        <div>
            <span>2</span>
        </div>
        <div>
            <span>3</span>
        </div>
    </Carousel>
);

Breakpoints Usage

You can define custom settings per breakpoint for truly responsive behaviour.

import Carousel from 'styled-components-carousel';
 
const Example = () => (
    <Carousel
        slidesToShow={3}
        center
        centerPadding={30}
        breakpoints={[
            {
                size: 200,
                settings: {
                    slidesToShow: 1,
                    showArrows: false,
                    showIndicator: false,
                    swipeable: true,
                },
            },
            {
                size: 600,
                settings: {
                    slidesToShow: 3,
                    showArrows: false,
                    showIndicator: true,
                    swipeable: true,
                },
            },
            {
                size: 1000,
                settings: {
                    slidesToShow: 4,
                    showArrows: true,
                    showIndicator: true,
                    center: true,
                    swipeable: true,
                },
            },
        ]}
    >
        <div>
            <span>1</span>
        </div>
        <div>
            <span>2</span>
        </div>
        <div>
            <span>3</span>
        </div>
    </Carousel>
);

Props

Prop	Type	Required	Description	Default
center	boolean	No	Should the items be centered?	False
infinite	boolean	No	Should the carousel infinitely scroll the items	False
showIndicator	boolean	No	Should the bottom item indicator be shown?	True
showArrows	boolean	No	Should the side navigation arrows be shown?	True
swipeable	boolean	No	Is the carousel swipeable?	True
debug	boolean	No	A dev helper prop for debugging development	False
slidesToShow	number	No	The number of slides to show at once.	1
scaleOnFocus	number	No	How much should the focused item scale?	1
centerPadding	number	No	Used in conjunction with center property to adding padding to center card	0
breakpoints	array	No	An array of settings in order to have responsive behaviour for different screen sizes	undefined

Development

Storybook

yarn storybook

Run tests

yarn test

Build

yarn build

RoadMap (open to feature requests)

• Accessibility support
• Custom slide animation
• Custom arrow component
• Custom indicator component
• Vertical track