Must pass rtl to support RTL languages, and a parent DOM element must have the dir attribute set to rtl as well. Optional, used to specify the direction of the carousel. draggableĬontrols whether mouse/touch swiping is enabled, defaults to true. Time to wait before advancing to the next slide when autoplay is true. If true, the slideshow will automatically advance. clickToNavigateĬontrols whether or not clicking slides other than the currently selected one should navigate to the clicked slide. The easing function to use for the transition. If a number is specified, it indicates the number of Time for the transition effect between slides, defaults to 500.

The type of transition to use between slides, defaults to slide. Optional callback which will be invoked after a slide change occurs. Should have method signatureįunction(newIndex, prevIndex, direction) afterChange Optional callback which will be invoked before a slide change occurs. Used to set the alignment of the currently selected slide in the carousel's viewport. Without specifying this, slides will simply be the height of their Used to specify a fixed height for all slides. Without specifying this, slides will simply be the width of their content. Used to specify a fixed width for all slides. Number of pixels to render between slides. Note that this prop is ignored for slides that are simply img tags - these carousels should use the imagesToPrefetch prop instead. For example, if the currently selected slide is slide 10, and this prop is set to 5, then slides 8-12 will be rendered, and all other slides will render a lightweight placeholder. If lazyLoad is set to true, this value will be used to determine how many slides to fully render (including the currently selected slide). If the slides are not simple img elements, this prop will have no effect. If lazyLoad is set to true, this value will be used to determine how many images to fetch at mount time. Note that lazy loading will only work if the slides are img tags or if both slideWidth and slideHeight are specified. If false, the carousel will render all children at mount time and will not attempt to lazy load images. If true, clicking next/previous when at the end/beginning of the slideshow will wrap around. If false, the arrow buttons will not be rendered. If false, the dots below the carousel will not be rendered. Optional class which will be added to the carousel class.

viewportHeightĭetermines the height of the viewport which will show the images. Visible, this width should match the slideWidth prop or the width of the child images. If you don't want the previous/next images to be viewportWidthĭetermines the width of the viewport which will show the images.

heightĭetermines the height of the outermost carousel div. widthĭetermines the width of the outermost carousel div. Available props: initialSlideĭetermines the first visible slide when the carousel loads, defaults to 0. The Storybook should open in your browser automatically. body ) Running test page:Ĭlone the repository, run npm i and then run npm run storybook. Import React from 'react' import from 'react-dom' import Carousel from 'react-img-carousel' require ( 'react-img-carousel/lib/carousel.css' ) render (, document.

React image carousel