All notable changes to this project will be documented in this file.
The format is based on Keep a Changelog and this project adheres to Semantic Versioning.
- Fixes #issue 173. Problem was caused by framer-motion enter animation div having 0
height
, and hence making the carousel have 0height
, when the animation took a long time to start, or the user was spamming the next button. Now, the library checks for 0height
, and retries to setheight
after a few ms until the div'soffsetHeight
isn't 0 anymore. (@learus)
- The carousel now changes its height to be exactly the height of the current active child.
- Added the
height
prop, to specify an exact height for the carousel. If it is specified, the carousel's height will no longer be the active child's height. - Added a section in the demo to demonstrate dynamic height functionality.
- 🐛 Fixed the
index
bug, where the carousel wouldn't update when theindex
prop was changed. - Removed unnecessary and forgotten console logs
- Added support for sx prop on Carousel container (@matyas-igor)
- Now
autoPlay
is paused when carousel is focused using keyboard, hence making the library more accessible. Issue. (@hajineats) - Links to contributor profiles on CHANGELOG.md
- Converted makeStyles into using styled helper (@matyas-igor)
- Updated the file structure to be more readable (@Learus)
- (Breaking) Added
@mui/system
as peer dependency.- Reason: The newly added
sx
prop is of typeSxProps
imported from@mui/system
.
- Reason: The newly added
- Removed legacy @mui/styles (and thus jss dependency) (@matyas-igor)
This version is unpublished. Its changes are moving to version 3.2.0 among others.
- Changed
next
,prev
, andonChange
typings to reflect their arguments and return value.
🎆🔥 React Material Ui Carousel has been fully refactored to use more modern react techniques such as hooks, functional components and other cool stuff. 🔥🎆
In general, its usage does not change.
- The library is now written in Typescript, for easier development, debugging and smaller package sizing.
- (Breaking) Now supports MUI 5 by default. Version 3 will not work with MUI 4 as of now. (@Learus)
- Hence, minimum React version has been bumped to
^17.0.1
- Hence, minimum React version has been bumped to
- (Breaking) Now uses
framer/motion
to handle animations and gesture support. More animations will be added in the future. (@Learus)- "Enter" and "Exit" animations are now simultaneous. No flash/gap of background between slide changes. Fixes issues 20, 61, 66.
- The first carousel item now renders without an "initial" animation. Implements feature request 92.
- (Breaking) The
timeout
prop is nowduration
and only supports a number that handles every aspect of the animation (enter, exit, e.t.c.)
- (Breaking) Now renders (preloads) all items initially and does not rerender them, unless there has been a state change. Implements feature request 88 (@Learus)
- (Breaking)
CarouselStyleProps
→CarouselNavProps
(@Learus) - Updated the Demo page look.
findDOMNode is deprecated in StrictMode.
warning has now been fixed. Material UI animations are no longer being used. Issue. (@Learus)Can't perform a React state update on an unmounted component.
warning has now been fixed. Issue. (@Learus)
- Removed any dependencies that were necessary for version 2. Only dependency now is
framer/motion
- Fixed author link on README.md. It didn't work. (@hamidreza-nateghi)
- Added all
aria
props to:navButtonsWrapperProps
navButtonsProps
indicatorIconButtonProps
activeIndicatorIconButtonProps
indicatorContainerProps
(@Learus)
- Added
reverseEdgeAnimationDirection
prop. Normally, the Carousel reverses the animation direction when going from its last child to its first (right --> left). It also reverses the animation direction when going from its first child to its last (left --> right). This prop disables this functionality. Now every "next" button press will have a right directed animation and each "previous" button press will have a left directed animation. (@Learus)
- Fixed a bug where it was necessary to provide both
className
andstyle
when styling buttons or indicators, when using typescript. (@Learus)
- Updated
react-swipeable
package to^6.1.0
from^5.5.1
. (@Learus)
- Added
IndicatorIcon
prop explanation to Documentation. (@Learus)
- Corrected typo:
textAligh
-->textAlign
on README.md (@Learus)
- Updated the library's
peerDependencies
toreact: ^17.0.1
and@material-ui: ^4.11.3
(@Learus)
- Removed a wrongly placed brace in the class value of the navigation buttons, that caused them to not be hidden by default. (@8BitAron)
- Added
index.d.ts
explanation forIndicatorIcon
prop. (@Learus)
- Fixed
index.d.ts
2.2.0 new props to be optional, from mandatory. (@Learus)
- Added
boolean
propcycleNavigation
that allows the developer to choose whether they want the carousel to cycle when it reaches the first or last slide. (@Learus) - Added customizability to button icons. Using the
NextIcon
,PrevIcon
, andIndicatorIcon
one can customize the icon part of the navigation buttons and indicators. Those props are of typeReactNode
, meaning they can be whatever one wants them to be, without breaking important carousel functionality. (@Learus & @cansin) - Added even more customizability to buttons. Using the
NavButton
prop, you get full control of the navigation buttons. The prop should be a function that takes the specified parameters and returns a ReactNode. It's advised to return a<Button/>
using the givenonClick
parameter for the next and prev functions to work properly. It works in tandem with all other customization options:navButtonsProps
,navButtonsWrapperProps
,navButtonsAlwaysVisible
,navButtonsAlwaysInvisible
,fullHeightHover
, ...). (@Learus) - Added the Customizability section to the README.md (@Learus)
- Added 3rd example regarding customizability in the demo (TODO) (@Learus)
- Changed indicator rendering implementation to support customization, and introduce consistency with next and prev buttons. Now, working with MUI
IconButton
. (@Learus) - Changed
indicatorProps
toindicatorIconButtonProps
andactiveIndicatorProps
toactiveIndicatorIconButtonProps
(@Learus) - Changed
indicatorIconButtonProps
to style all indicators rather than only the non-active ones (@Learus) - Changed
buttonVisible
class'opacity
to1
from0.6
.
- Added CHANGELOG.md (@Learus)
- Added
boolean
propswipe
that implements ability to toggle swipe behaviour. Default:true
. (@Learus) - Added
boolean
propstopAutoPlayOnHover
that implements ability to stop autoPlay (auto-scroll slides) when mousing over the carousel. Default:true
. (@Learus)
- Pressing the Next Button while being on the last slide, triggers the "Back" animation when going cycling back to the first slide. Fixes bug #1. (@Learus)
- Changed timeout explanation on README, to refer to Material UI Documentation. (@Learus)
- Removed
timer
prop from Demo code, since it was obsolete and not used. A relic of early development. (@Learus)