x3388638 / react-grid-carousel

React responsive carousel component w/ grid layout

React Grid Carousel

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

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
• Autoplay
• Enable/Disable scroll-snap for each item on mobile device
• Customized layout (cols & rows) for different breakpoint
• Customized arrow button
• Customized dots
• Support SSR

Install

$ npm install react-grid-carousel --save

Usage

Just import the Carousel component from react-grid-carousel
and put your item into Carousel.Item

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>
  )
}

Props

Prop	Type	Default	Description
cols	Number	1	Column amount rendered per page
rows	Number	1	Row amount rendered per page
gap	Number | String	10	Margin (grid-gap) for each item/grid in px or %, passed Number will turn to px unit
loop	Boolean	false	Infinite loop or not
scrollSnap	Boolean	true	true for applying scroll-snap to items on mobile
hideArrow	Boolean	false	Show/hide the arrow prev/next buttons
showDots	Boolean	false	Show dots indicate the current page on desktop mode
autoplay	Number		Autoplay timeout in ms; undefined for autoplay disabled
dotColorActive	String	'#795548'	Valid css color value for active dot
dotColorInactive	String	'#ccc'	Valid css color value for inactive dot
responsiveLayout	Array		Customized cols & rows on different viewport size
mobileBreakpoint	Number	767	The breakpoint(px) to switch to default mobile layout
arrowLeft	Element		Customized left arrow button
arrowRight	Element		Customized left arrow button
dot	Element		Customized dot component with prop isActive
containerStyle	Object		Style object for carousel container

responsiveLayout

Array of layout settings for each breakbpoint

Setting options

• breakpoint: Number; Requried; Equals to max-width used in media query, in px unit
• cols: Number; Column amount in specific breakpoint
• rows: Number; Row amount in specific breakpoint
• gap: Number | String; Gap size in specific breakpoint
• loop: Boolean; Infinite loop in specific breakpoint
• autoplay: Number; autoplay timeout(ms) in specific breakpoint; undefined for autoplay disabled

e.g.

[
  {
    breakpoint: 800,
    cols: 3,
    rows: 1,
    gap: 10,
    loop: true,
    autoplay: 1000
  }
]

dot

Example

// your custom dot component with prop `isActive`
const MyDot = ({ isActive }) => (
  <span
    style={{
      display: 'inline-block',
      height: isActive ? '8px' : '5px',
      width: isActive ? '8px' : '5px',
      background: '#1890ff'
    }}
  ></span>
)

// set custom dot
<Carousel dot={MyDot} />

Example

Storybook (Don't forget to try on different viewport size)

$ git clone https://github.com/x3388638/react-grid-carousel
$ cd react-grid-carousel
$ npm ci
$ npm run storybook

Use case in real world

# clone & install packages
$ npm run dev
# open localhost:8080

or visit https://react-grid-carousel.now.sh/#use-case-in-real-world

LICENSE

MIT

react-grid-carousel's Issues

Add currentPage as Prop?

Is there any way to set currentPage as a prop? Since this is a functional component, you can't use refs.
Thanks.

Can not install it on React 17.0.2

Hi there! Great work, although I cannot install it on React 17.0.2. It search for React ^16.12.0

Show dots for mobile

How can I show dots for mobile?

Grid gap is provided also for the first and the last item in a row. How do you override that?

how to play only 1 item and scroll 1 by 1 not the whole page?

semantic mistake

Hi i scan my project with Accessibility Insight and i have an issue with an ul tag that does not contain li tag.
But this ul is generate by your project.
Can you replace by a div ? Because there is no need of such tag here.
Best regards

Capture d’écran de 2022-01-04 17-10-02

Autoplay is not working at 3000ms

<Carousel hideArrow showDots={Dots? true: false} dot={MyDot2} gap={10} autoplay={3000} loop>

Here I am creating a carousel with 3 pictures and expecting1pic/1000ms should function but is not moving as expected while a single image should appear at once when it is working with default props.

autoplay.is.not.working.when.set.to.3sec.mp4

React Native Version!

Hi @x3388638 , This project is so good! It surely deserves a react native version. Good job!
I would like to contribute to the project if you plan to start.

Carousel gets back to first page if clicked on image

I have a React Grid Carousel with 3 images per page, they are 6 in total, which is 2 carousel pages.
If I click the image (it's prompting a modal), it gets back to the first carousel page.

How can I make sure that if the image in the modal is clicked it doesn't force a "reset" of the carousel pages?

customized arrows and x-overflow

how can i customize the arrows?
and how can i adjust the total container size to avoid x-overflow

I believe the arrows are increasing the size of my container, even setting them hideArrow, my width is bursting

React.App.-.Google.Chrome.2022-12-10.18-49-28.mp4

Update to last react versions

Hi! I have a question, will the library be updated? To avoid the install --force on the installation, to be compatible with lastest versions of react (and even nextjs), to fix bugs because the library has some bugs in responsive views... but I feell that this library is the best.

Typescript support

Hi guys, excellent work! I wonder if it's on the plans to add typescript support? Thanks!

Not installing in [email protected] its working upto react@"^16.12.0". Please help me out i need to install this in [email protected]

Could not resolve dependency:
npm ERR! peer react@"^16.12.0" from [email protected]
npm ERR! node_modules/react-grid-carousel
npm ERR! react-grid-carousel@"^1.0.1" from the root project