Mobile-friendly Carousel with batteries included (supporting touch, mouse emulation, lazy loading, thumbnails, fullscreen, RTL, keyboard navigation and customisations).
This example has custom elements in slides (user-managed slides) using the children
prop; and custom widget positions.
A default carousel example has lazy loading and preloading (the 2 adjacent images on either side of the current image); touch swiping and mouse dragging on the carousel; touch swiping, mouse dragging and wheel scrolling on the thumbnails; touch swipe down to exit the maximized carousel; and keyboard navigation.
A default carousel example has lazy loading and preloading; touch swiping and mouse dragging on the carousel; touch swiping, mouse dragging and wheel scrolling on the thumbnails; touch swipe down to exit the maximized carousel; and keyboard navigation.
This example has images dynamically set in the useEffect()
hook. This customized example additionally has click to enter and exit the maximized carousel; custom initial index; custom widget positions; custom thumbnails, custom dot buttons and captions for the maximized carousel; custom active and passive dot buttons; and custom styles for the non-maximized carousel.
To customize the carousel in a declarative manner, pass the props (e.g. isAutoPlaying
, isMaximized
, index
). To customize the carousel in an imperative manner, use the following handlers (on the ref):
To customize the icons, pass custom icon component to props (e.g. leftIcon
, rightIcon
).
To use custom elements, set the widget props (e.g. hasLeftButton
, hasRightButton
) to false
, then pass the custom elements to the elements
prop.