jedliSlider is interactive, continuous carousel with multiple options to use in your React app. react-jedlislider is react version of jedliSlider with only continuous mode (because this mode is the one fully finished, and used the most).
Because it’s easy to use, modern and will have all options that you want. Some popular carousels still use floats and a lot of unnecessary scripts/styles. My intention was to create one slider, that will contain all things i missed in other carousels. With as low code and css as possible. So you don't need to override some default styles.
jedliSlider is built on css flexbox. So will be compatible with every browser that supports flexbox.
| Option: | Default: | Available options: | Description: |
| tag | string: 'div' | string: all HTML tags | Html tag for slider wrapper |
| slidesWidth | string: 'equal' | string: 'equal'/'auto' | determinate if all slides should be same size, specified by slider; or width of every slides can be different, specifed from css/content |
| speed | int: 100 | int > 0 | Transition duration of one single change. Speed is calculated: given speed width of all slides 1000 |
| visibleSlides | int: 1 | int > 0 | This option works when "slidesWidth" is set to "equal". Determinate how many slides will be visible. Width of every slide will be calculated to match given value. * For example if visibleSlides is set to 2, every slide's width gonna be 50% |
| overflow | string: 'hidden' | string: 'hidden'/'visible' | Define if slider should have overflow hidden or not |
| pauseOnHover | bool: false | bool: false/true | Determinate if carousel should stop animation on hover, or for accessibility reasons - on focus on any element inside slider |
| direction | string: 'ltr' | string: 'ltr'/'rtl' | Determinate if carousel should rotate from left to right, or right to left |