Skip to content

Commit

Permalink
Merge pull request #36 from vadymshymko/develop
Browse files Browse the repository at this point in the history 
Make infinite prop optional && fix small bugs with touch and mouse nav
  • Loading branch information
@vadymshymko
vadymshymko authored Jun 18, 2021
2 parents f523f62 + c8be725 commit 738368e
Show file tree
Hide file tree
Showing 3 changed files with 255 additions and 219 deletions.
51 changes: 27 additions & 24 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,30 +72,33 @@ class App extends Component {

## Props

| Name | Type | Default Value | Description |
| ---------------------- | -------------------------------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| activeSlideIndex | number | | Index of first visible children (slide) |
| activeSlideProps | object | {} | DOM props for first visible slide element |
| autoplay | boolean | false | Boolean indicating if the carousel should be updated automatically |
| autoplayDirection | string ('forward' or 'backward') | 'forward' | Direction of autoplay updates |
| backwardBtnProps | object | {} | Contain DOM props for carousel backward button element, boolean prop `show` (for toggle button render) and node prop `children` (for render button childrens) |
| children | node | null | Array of slides |
| containerProps | object | {} | DOM props for container div element |
| delay | number | 0 | Slide change delay (css transition delay) in ms |
| disableNavIfAllVisible | boolean | true | Boolean indicating if the carousel nav (by nav buttons, click on slide item, mouse move or touch move) should be disabled if all slides is visible |
| easing | string | 'linear' | Slide change easing (css transition easing) |
| forwardBtnProps | object | {} | Contain DOM props for carousel forward button element, boolean prop `show` (for toggle button render) and node prop `children` (for render button childrens) |
| hideNavIfAllVisible | boolean | true | Boolean indicating if the carousel nav buttons should be hidden if all slides is visible |
| innerProps | object | {} | DOM props for inner div element |
| itemsListProps | object | {} | DOM props for items list div element |
| itemsToScroll | number | 1 | number of slides that should be scrolled to hidden part of carousel |
| itemsToShow | number | 0 (automaticaly calculated) | number of slides that should be visible |
| onAfterChange | function | null | Function that will be run after all updates is done and carousel moving is end |
| onRequestChange | function | | Function that will be run when the activeSlideIndex is requested to be changed (either by clicking on navigation button, clicking on slide (if prop `updateOnItemClick` value is `true` ), or after drag slides) |
| responsiveProps | Array of objects | [] | carousel props for different window width. For example: `[{minWidth: 768, maxWidth: 992, itemsToShow: 3}, {maxWidth: 767, itemsToShow: 1}]` will show only one slide when window width is less than 767px and show 3 slides when window width is >= 768px and < 992px |
| speed | number | 0 | Slide change speed (css transition speed) in ms |
| updateOnItemClick | boolean | false | Boolean indicating if the `onRequestChange` prop should be called after click on some slide |
| centerMode | boolean | false | Boolean indicating if the active slide should be aligned to center of container viewport |
| Name | Type | Default Value | Description |
| ----------------------------------------------------------------- | ------------------------------------ | ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **activeSlideIndex** | number | | Index of active slide |
| **activeSlideProps** | object | `{}` | DOM props for active slide element |
| **autoplay** | boolean | `false` | |
| **autoplayDirection** | string (`'forward'` or `'backward'`) | `'forward'` | |
| **backwardBtnProps** | object | `{}` | DOM props for carousel backward nav button element (include boolean prop `show` (for toggle button render) and node prop `children` (for render button childrens)) |
| **children** | node | `null` | slides array |
| **containerProps** | object | `{}` | DOM props for carousel container div element |
| **delay** | number | `0` | Slide change delay (css transition delay) in ms |
| **disableNavIfAllVisible** | boolean | `true` | Disable carousel nav if all slides is visible |
| **easing** | string | `'linear'` | Slide change easing (css transition easing) |
| **forwardBtnProps** | object | `{}` | DOM props for carousel forward nav button element (include boolean prop `show` (for toggle button render) and node prop `children` (for render button childrens)) |
| **hideNavIfAllVisible** | boolean | `true` | Hide nav buttons if all slides is visible |
| **innerProps** | object | `{}` | DOM props for inner div element |
| **itemsListProps** | object | `{}` | DOM props for items list div element |
| **itemsToScroll** | number | `1` | How many slides to scroll at once |
| **itemsToShow** | number | `0` (automaticaly calculated) | How many slides to show |
| **onAfterChange** | function | `null` | activeSlideIndex change callback |
| **onRequestChange** | function | | Callback to handle every time the active slide changes, receives the new active index as arguments. |
| **responsiveProps** | Array of objects | `[]` | carousel props for different window width. For example: `[{minWidth: 768, maxWidth: 992, itemsToShow: 3}, {maxWidth: 767, itemsToShow: 1}]` will show only one slide when window width is less than 767px and show 3 slides when window width is >= 768px and < 992px |
| **speed** | number | `0` | Carousel scroll speed (css transition speed) in ms |
| **updateOnItemClick** | boolean | `false` | Update active item index after click on some slide |
| **centerMode** (disabled if `infinite` prop disabled) | boolean | `false` | Align active slide to the center of the carousel container viewport |
| **infinite** | boolean | `true` | Enable infinite loop scroll |
| **disableNavIfEdgeVisible** (disabled if `infinite` prop enabled) | boolean | `false` | Disable carousel forward nav if last slide is visible / Disable carousel backward nav if first slide is visible |
| **disableNavIfEdgeActive** | boolean | `false` | Disable carousel forward nav if activeSlideIndex === lastSlideIndex / Disable carousel backward nav if activeSlideIndex === 0 |

## Demo

Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-simply-carousel",
"version": "4.2.2",
"version": "5.0.0",
"description": "Simple react.js carousel component",
"main": "dist/index.js",
"files": [
Expand Down
Loading

0 comments on commit 738368e

Please sign in to comment.