x3388638 / React Grid Carousel
Licence: mit
React responsive carousel component w/ grid layout
Stars: ✭ 29
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Grid Carousel
React Responsive Carousel
React.js Responsive Carousel (with Swipe)
Stars: ✭ 1,962 (+6665.52%)
Mutual labels: react-component, gallery, slider, carousel
Slider
Touch swipe image slider/slideshow/gallery/carousel/banner mobile responsive bootstrap
Stars: ✭ 2,046 (+6955.17%)
Mutual labels: gallery, slider, carousel
Vue Gallery
📷 Responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers.
Stars: ✭ 405 (+1296.55%)
Mutual labels: gallery, slider, carousel
Ngx Gallery
Angular Gallery, Carousel and Lightbox
Stars: ✭ 417 (+1337.93%)
Mutual labels: image, gallery, carousel
React Alice Carousel
React responsive component for building content galleries, content rotators and any React carousels
Stars: ✭ 419 (+1344.83%)
Mutual labels: react-component, gallery, carousel
React Image Gallery
React carousel image gallery component with thumbnail support 🖼
Stars: ✭ 2,946 (+10058.62%)
Mutual labels: gallery, carousel, react-component
React Splide
The Splide component for React.
Stars: ✭ 32 (+10.34%)
Mutual labels: react-component, slider, carousel
React Awesome Slider
React content transition slider. Awesome Slider is a 60fps, light weight, performant component that renders an animated set of production ready UI general purpose sliders with fullpage transition support for NextJS and GatsbyJS. 🖥️ 📱
Stars: ✭ 2,343 (+7979.31%)
Mutual labels: react-component, gallery, carousel
Swiper
Most modern mobile touch slider with hardware accelerated transitions
Stars: ✭ 29,519 (+101689.66%)
Mutual labels: gallery, slider, carousel
skeleton-carousel
Carousel component. Horizontal and vertical swipe navigation
Stars: ✭ 31 (+6.9%)
Mutual labels: gallery, slider, carousel
MediaSliderView
Pure java based, highly customizable media slider gallery supporting both images and videos for android.
Stars: ✭ 85 (+193.1%)
Mutual labels: gallery, slider, carousel
react-carousel-minimal
React.js Responsive Minimal Carousel
Stars: ✭ 76 (+162.07%)
Mutual labels: slider, react-component, carousel
React Whirligig
A react carousel/slider like component for sequentially displaying slides or sets of slides
Stars: ✭ 20 (-31.03%)
Mutual labels: slider, carousel
Vue Slick Carousel
🚥Vue Slick Carousel with True SSR Written for ⚡Faster Luxstay
Stars: ✭ 447 (+1441.38%)
Mutual labels: slider, carousel
React Compound Slider
◾️ React Compound Slider | A small React slider with no opinion on markup or styles
Stars: ✭ 553 (+1806.9%)
Mutual labels: react-component, slider
React Viewer
react image viewer, supports rotation, scale, zoom and so on
Stars: ✭ 502 (+1631.03%)
Mutual labels: image, gallery
Hooper
🎠 A customizable accessible carousel slider optimized for Vue
Stars: ✭ 561 (+1834.48%)
Mutual labels: slider, carousel
React Slider
Accessible, CSS agnostic, slider component for React.
Stars: ✭ 627 (+2062.07%)
Mutual labels: react-component, slider
Louvre
A small customizable library useful to handle an gallery image pick action built-in your app. 🌄🌠
Stars: ✭ 629 (+2068.97%)
Mutual labels: image, gallery
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 tomax-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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].