$ npm i  react-grid-carousel  --save

React resposive carousel component w/ grid layout to easily create a carousel like photo gallery, shopping product card or anything you want

GitHub

Example

Use case in real world

Features

Install

$ npm install react-grid-carousel --save

Usage


import React from 'react'
import Carousel from 'react-grid-carousel'

const Gallery = () => {
  return (
    <Carousel cols={2} rows={1} gap={10} loop>
      <Carousel.Item>
        <img width="100%" src="https://picsum.photos/800/600?random=1" />
      </Carousel.Item>
      <Carousel.Item>
        <img width="100%" src="https://picsum.photos/800/600?random=2" />
      </Carousel.Item>
      <Carousel.Item>
        <img width="100%" src="https://picsum.photos/800/600?random=3" />
      </Carousel.Item>
      <Carousel.Item>
        {/* anything you want to show in the grid */}
      </Carousel.Item>
      {/* ... */}
    </Carousel>
  )
}

Docs

https://github.com/x3388638/react-grid-carousel
© 2020 YY