21 | This example has custom elements in slides (user-managed slides) using
22 | the children prop; and custom widget positions.
23 |
53 | react-gallery-carousel is a mobile-friendly 54 | dependency-free React carousel component with support for touch, 55 | mouse dragging, lazy loading, thumbnails, modal, keyboard 56 | navigation, RTL and pinch to zoom. 57 |
58 | Demo 59 | / 60 | 61 | GitHub 62 | 63 | / 64 | 65 | npm 66 | 67 | / 68 | 69 | Documentation 70 | 71 |npm install react-gallery-carousel --save
75 | yarn add react-gallery-carousel
79 | The default carousel shown below as example 2 is created by:
83 |{'
84 | 14 | A default carousel example has lazy loading and preloading (the 2 15 | adjacent images on either side of the current image); touch swiping 16 | and mouse dragging on the carousel; touch swiping, mouse dragging and 17 | wheel scrolling on the thumbnails; touch swipe down to exit the 18 | maximized carousel; and keyboard navigation. 19 |
20 |14 | A default carousel example has lazy loading and preloading; touch 15 | swiping and mouse dragging on the carousel; touch swiping, mouse 16 | dragging and wheel scrolling on the thumbnails; touch swipe down to 17 | exit the maximized carousel; and keyboard navigation. 18 |
19 |
21 | This example has images dynamically set in the{' '}
22 | useEffect() hook. This customized example additionally
23 | has click to enter and exit the maximized carousel;
24 | custom initial index; custom widget positions; custom thumbnails,
25 | custom dot buttons and captions for the maximized carousel; custom
26 | active and passive dot buttons; and custom styles for the
27 | non-maximized carousel.
28 |
19 | To customize the carousel in a declarative manner, pass the props
20 | (e.g. isAutoPlaying, isMaximized,{' '}
21 | index). To customize the carousel in an imperative
22 | manner, use the following handlers (on the ref):
23 |
16 | To customize the icons, pass custom icon component to props (e.g.{' '}
17 | leftIcon, rightIcon).
18 |
18 | To use custom elements, set the widget props (e.g.{' '}
19 | hasLeftButton, hasRightButton) to{' '}
20 | false, then pass the custom elements to the{' '}
21 | elements prop.
22 |
10 | Mobile-friendly Carousel with batteries included (supporting touch, 11 | mouse emulation, lazy loading, thumbnails, fullscreen, RTL, keyboard 12 | navigation and customisations). 13 |
14 |
34 | Sorry{' '}
35 |
36 | 😔
37 | {' '}
38 | we couldn’t find what you were looking for.
39 |
40 | {process.env.NODE_ENV === 'development' ? (
41 | <>
42 |
43 | Try creating a page in src/pages/.
44 |
45 |
46 | ) : null}
47 |
48 | Go home.
49 |
20 | This example has custom elements in slides (user-managed slides) using
21 | the children prop; and custom widget positions.
22 |
52 | react-gallery-carousel is a mobile-friendly 53 | dependency-free React carousel component with support for touch, 54 | mouse dragging, lazy loading, thumbnails, modal, keyboard 55 | navigation, RTL and pinch to zoom. 56 |
57 | Demo 58 | / 59 | 60 | GitHub 61 | 62 | / 63 | 64 | npm 65 | 66 | / 67 | 68 | Documentation 69 | 70 |npm install react-gallery-carousel --save
74 | yarn add react-gallery-carousel
78 | The default carousel shown below as example 2 is created by:
82 |{'
83 | 13 | A default carousel example has lazy loading and preloading (the 2 14 | adjacent images on either side of the current image); touch swiping 15 | and mouse dragging on the carousel; touch swiping, mouse dragging and 16 | wheel scrolling on the thumbnails; touch swipe down to exit the 17 | maximized carousel; and keyboard navigation. 18 |
19 |13 | A default carousel example has lazy loading and preloading; touch 14 | swiping and mouse dragging on the carousel; touch swiping, mouse 15 | dragging and wheel scrolling on the thumbnails; touch swipe down to 16 | exit the maximized carousel; and keyboard navigation. 17 |
18 |
20 | This example has images dynamically set in the{' '}
21 | useEffect() hook. This customized example additionally
22 | has click to enter and exit the maximized carousel;
23 | custom initial index; custom widget positions; custom thumbnails,
24 | custom dot buttons and captions for the maximized carousel; custom
25 | active and passive dot buttons; and custom styles for the
26 | non-maximized carousel.
27 |
17 | To customize the carousel in a declarative manner, pass the props
18 | (e.g. isAutoPlaying, isMaximized,{' '}
19 | index). To customize the carousel in an imperative
20 | manner, use the following handlers (on the ref):
21 |