$ npm i  react-grid-carousel  --save

Example

Use case in real world

• Simple sample
• Product carousel (Yahoo-like)
• News carousel (Yahoo-like)
• Image carousel (Airbnb-like)
• Testimonial carousel (Udemy-like)
• Multiple rows carousel (Shopee-like)
• Tour carousel (KLOOK-like)
• Responsive carousel (KKday-like)

Features

• RWD
• Multiple items
• Multiple rows
• Infinite loop
• Support any component as a item to put into grid
• Show/hide dots
• Show/hide arrow buttons
• Auto play
• Enable/Disable `scroll-snap` for each item on mobile device
• Customized layout (cols & rows) for different breakpoint
• Customized arrow button
• Support SSR

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