Demo
https://zniik.github.io/react-interactable-slider/
This was created for the purpose of properly showing product cards for ltr and rtl direction. It has some limitations or doesn't support the following feature:
- Autoplay
- Infinite slides
- Center aligned
- Image lazy loading (We can use 3rd party for now)
- Un-equal slides
Supported Feature
Below are the supported feature with their default value.
/** * Alignment of the slider * @param {'left'|'right'} */cellAlign='left' /** * Provide custom React Element for your arrows * It will wrap your component to a div with a class of * custom-left-arrrow and custom-right-arrow. Also, the * custom arrow will receive disabled and navigationType props * so you can handle css properly. * Make sure navigationType is set to arrows or both and it * will automatically show when slides exceeds the container width * @param */customArrows= left: <LeftArrow /> right: <RightArrow /> /** * Toggle drag functionality * @param */dragEnabled=true /** * Reveal debugging borders and snapPoints * around with your slider * @param */debug=false /** * Type of navigation for the slider * @param {'arrows', 'both', 'dots', 'none'} */navigationType='none' /** * Turn each slide of the slider into full width * (widthPerSlide configuration is ignored if this property is true) * @param */fullWidthPerSlide=false /** * The margin gaps between the slides * (Total in between, this case its value multiply by 2) * @param */marginGapsPerSlide=4 /** * Define the width of each slide * (This is ignored when fullWidthPerSlide property is true) * @param */widthPerSlide=200
How to use the plugin
Build the slider and put your custom content or elements. Please take note that the slides should not have any inline/css style width. Instead, we will define that in our plugin configuration.
Important notes before creating your slider:
- Add borders to your element to visually see the width when building your initial slides.
; const style = height: 300 border: '1px solid #ddd'; { return <ReactInteractableSlider cellAlign="left" navigationType="dots" widthPerSlide=182 marginGapsPerSlide=4 debug=true > <div style=style>1</div> <div style=style>2</div> <div style=style>3</div> <div style=style>4</div> <div style=style>5</div> ... </ReactInteractableSlider> ;}
Dynamic Slides
; const slides setSlides = ; const style = height: 300 border: '1px solid #ddd'; { return <> <button onClick= >Add 1 slide</button> <button onClick= >Remove 1 slide</button> <ReactInteractableSlider debug=true navigationType='both'> slides </ReactInteractableSlider> </> ;}