Demo: https://dvyogesh.github.io/lerna-starter/?path=/story/design-system-gridcarousel--introduction
React Grid Carousel
GridCarousel is a powerful and multi-functional lightweight, flexible ES6 JavaScript slider/carousel library that helps you create responsive and touch-enabled sliders with fast and performant CSS3 transitions. it helps you create a highly customizable, fully responsive, mobile (only mobile) swipe-friendly content carousel/slider with lots of useful functionalities for modern web/mobile designs.
Mainly Every div
has class so we can overide by using any parent class of app accoriding to requird design and responsive using @media
query.
React resposive grid carousel component w/ grid layout
to easily create a carousel like photo gallery, shopping product card, to slide simple banners or anything you want
Features
- Server side rendering
- custom scroll bar hide/show
- Multiple items slide
- Supports images, videos, text content or anything you want. Each direct child represents one slide!, Support any component as a item to put into grid
- hide/show dots
- hide/show arrow buttons
- Autoplay
- Customized layout Items
- Customized arrow button
- Customized dots
- Each div having class so we can overide css at any time in app
- Swipe to slide (mobile only)
- light waight
Install
$ npm install @yoge-shource/grid-carousel-react --save
$ yarn add @yoge-shource/grid-carousel-react
Usage
Just import the GridCarousel
component from @yoge-shource/grid-carousel-react
and pass your item into itemComponent prop
import React from 'react';
import GridCarousel from '@yoge-shource/grid-carousel-react';
const Item = ({item}) => (
<div style={{
height:'100px',
width: '98%',
border: '1px solid #ccc',
margin: '5px'
}}>
{item.name}
</div>
);
const carouselData = [{name: 'item1'},{name: 'item1'},{name: 'item1'},{name: 'item1'},{name: 'item1'}]
const CustomGridCarousel = () => {
return (
<GridCarousel customScrollbar={false} dots={true} carouselData={carouselData} itemComponent={Item} />
)
}
-- OR --
Second Way
Just import the GridCarousel
component from @yoge-shource/grid-carousel-react
and pass your item as childrens
import React from 'react';
import GridCarousel from '@yoge-shource/grid-carousel-react';
const Item = (index) => (<div>{index}</div>)
const carouselData = [{name: 'item1'},{name: 'item1'},{name: 'item1'},{name: 'item1'},{name: 'item1'}]
const Gallery = () => {
return (
<GridCarousel customScrollbar={false} dots={true} carouselData={carouselData}>
<div>
<img width="100%" src="https://picsum.photos/800/600?random=1" />
</div>
<div>
<img width="100%" src="https://picsum.photos/800/600?random=2" />
</div>
<div>
<img width="100%" src="https://picsum.photos/800/600?random=3" />
</div>
<div>
{/* anything you want to show in the grid */}
</div>
{/* ... */}
</Carousel>
)
}
Props
Prop | Type | Default | Description |
---|---|---|---|
itemComponent | Type of React component or Element | 1 | We need to pass itemComponent and carouselData as props to GridCarousel , then GridCarousel will take this component and loop this component using carouselData and while looping, GridCarousel will send item ,...otherprop as pops to itemComponent.page |
carouselData | Array | [] | const data=[{},{}];<GridCarousel carouselData={data} /> |
page | |||
numberOfItemToScroll | Number | 10 | <GridCarousel numberOfItemToScroll={2} /> |
loop | Boolean | false | Infinite loop or not |
otherProps | instence of Object | Array | |
hideArrow | Boolean | false | Show/hide the arrow prev/next buttons |
dots | Boolean | false | Show dots indicate the current page on desktop mode |
autoplay | Boolean | Autoplay true | false | |
numberOfCardsToShow | Number | 1 | should be carouselData > numberOfCardsToShow<GridCarousel numberOfCardsToShow={2} />
|
hideArrowsOnEnd | Boolean | false | should be true || false ` // true |
customScrollbar | Bool | true | should be true |
children | Type of React children or Element | 767 | should wrap with <GridCarousel> like <GridCarousel carouselData={gridCarouselMockData} > gridCarouselMockData.map((item, itemKey) => ( <div className="carousel-item"><CarouselItem item={item}/> </div>)) </GridCarousel>
|
customArrows | object | should wrap with double braces customArrows={{}} like customArrows={{leftArrow: Arrows, // your Arrow component and do not <Arrow /> leftArrowProps: {left:'right', square:'square'}, // your Arrow component props rightArrow: Arrows, // your Arrow component props rightArrowProps:{right:'right', square:'square'} // your Arrow component props }}
|
|
arrowRight | Element | Customized left arrow button | |
dot | Element | should be true || false ` // true | |
containerStyle | Object | Style object for carousel container |
First way of integration
In first way of integration, We need to pass itemComponent
and carouselData
as props to GridCarousel
, then GridCarousel will take this component and loop this component using carouselData
and while looping, GridCarousel will send item
, ...otherprop
as pops to itemComponent.
In This Way itemComponent and carouselData props are mandatory.
import GridCarousel from '@yoge-shource/grid-carousel-react';
<GridCarousel
itemComponent={CarouselItem} // your component
carouselData={gridCarouselMockData}
otherProps={{
loading: false
}} // your other requered props
/>
</GridCarousel>
Second way of integration
In this second way instedOf passing itemComponent
prop, we can loop our component in side GridCarousel like below.
In This Way loop of component and carouselData props are mandatory.
sample
import GridCarousel from '@yoge-shource/grid-carousel-react';
<GridCarousel carouselData={gridCarouselMockData} >
{
gridCarouselMockData.length > 0 &&
gridCarouselMockData.map((item, itemKey) => (
<div className="carousel-item">
<CarouselItem item={item}/>
</div>
))
}
</GridCarousel>
Dots Enable
To enable dots in GridCarousel pass dots
prop as true dots={true}
import GridCarousel from '@yoge-shource/grid-carousel-react'
In First Way
<GridCarousel
dots={true} // ---> here <---
itemComponent={CarouselItem} // your component
carouselData={gridCarouselMockData}
/>
---- OR ----
In Second Way
<GridCarousel
dots={true} // ---> here <---
carouselData={gridCarouselMockData} >
{
gridCarouselMockData.length > 0 &&
gridCarouselMockData.map((item, itemKey) => (
<div className="carousel-item">
<CarouselItem item={item}/> // your component
</div>
))
}
</GridCarousel>
or visit https://dvyogesh.github.io/lerna-starter/?path=/story/design-system-gridcarousel--dots-enable
Hide custom scrollbar
To hide custom scrollbar pass customScrollbar prop as false customScrollbar={false}
import GridCarousel from '@yoge-shource/grid-carousel-react'
In First Way
<GridCarousel
customScrollbar={false} // here
itemComponent={CarouselItem} // your component
carouselData={gridCarouselMockData}
/>
// ---- OR ----
In Second Way
<GridCarousel
customScrollbar={false} //here
carouselData={gridCarouselMockData} >
{
gridCarouselMockData.length > 0 &&
gridCarouselMockData.map((item, itemKey) => (
<div className="carousel-item">
<CarouselItem item={item}/> // your component
</div>
))
}
</GridCarousel>
Custom Arrows
To Customize Arrows or to add own arrows, need to pass customArrows
prop.
import GridCarousel from '@yoge-shource/grid-carousel-react';
import Arrow from '---your arrow---'
First Way
<GridCarousel
itemComponent={CarouselItem} // your component
carouselData={gridCarouselMockData}
// --- here ---
customArrows={{
leftArrow: Arrows, // your Arrow component and do not <Arrow />
leftArrowProps: {left:'right', square:'square'}, // your Arrow component props
rightArrow: Arrows, // your Arrow component props
rightArrowProps:{right:'right', square:'square'} // your Arrow component props
}
}
/>
---- OR ----
Second Way
<GridCarousel
carouselData={gridCarouselMockData}
// --- here ---
customArrows={{ // double braces important
leftArrow: Arrows, // your Arrow component and do not <Arrow />
leftArrowProps: {left:'right', square:'square', onClick:onClickHandler},
// onClick: () => onClickHandler() ---- wrong----
// onClick: onClickHandler---- right----
rightArrow: Arrows,
rightArrowProps:{right:'right', square:'square', onClick:onClickHandler}
}} >
{
gridCarouselMockData.length > 0 &&
gridCarouselMockData.map((item, itemKey) => (
<div className="carousel-item">
<CarouselItem item={item}/> // your component
</div>
))
}
</GridCarousel>
or visit https://dvyogesh.github.io/lerna-starter/?path=/story/design-system-gridcarousel--custom-arrows
In side GridCarousel Above Arrow will render like this
<Arrows right='right', square='square' onClick={()=>onClick()} />
Auto Play or Auto slide
In first way of integration, We need to pass itemComponent
and carouselData
as props to GridCarousel, then GridCarousel
will take this component and loop this component using carouselData
and while looping, GridCarousel will send item, ...otherprop
as pops to itemComponent.
In This Way itemComponent and carouselData props are mandatory.
Autoplay will stop onHover of the GridCarousel
import GridCarousel from '@yoge-shource/grid-carousel-react'
First Way
<GridCarousel
autoPlay={true} //--- here--
itemComponent={CarouselItem} // your component
carouselData={gridCarouselMockData}
/>
---- OR ----
Second Way
<GridCarousel
carouselData={gridCarouselMockData}
autoPlay={true} //--- here--
>
{
gridCarouselMockData.length > 0 &&
gridCarouselMockData.map((item, itemKey) => (
<div className="carousel-item">
<CarouselItem item={item}/> // your component
</div>
))
}
</GridCarousel>
LICENSE
MIT