Skip to content
This repository has been archived by the owner on May 2, 2019. It is now read-only.

Latest commit

 

History

History
114 lines (87 loc) · 4.38 KB

README.md

File metadata and controls

114 lines (87 loc) · 4.38 KB
Raw

THIS PROJECT IS NOT MAINTAINED!

React Flex Slick

This is library aims to replace react-slick.

Uses flexbox exclusively, so no support for older browsers 😢 😢

On the bright side, it is extremly flexible. Currently it supports >=react-0.14 including rc's

Any questions?? Join here react-flex-slick on slack

Examples

To run the examples:

  1. git clone http://github.com/vramana/react-flex-slick
  2. cd react-flex-slick && npm i
  3. npm start

What works

  • Infinite and Non-infinite Mode
  • Pages
  • Horizontal and Vertical Sliding
  • Multiple Slides per page (slidesToScroll = slidesToShow)
  • Left and Right Arrows to go back and forth
  • Arrows have active and inactive classes.
  • Custom Arrows
  • Touch Scrolling/Mouse Dragging
  • Edge Friction

TODO

Comparision with Slick

Settings

  • cssEase - renamed to transitionTimingFn
  • speed - renamed to transitionSpeed
  • easing - Not supported: Minimum browser support ensure CSS Transistions are present.
  • arrows - Alternate way: Instead of arrows pass empty <div> to the Slider
  • appendArrows, appendDots - Not supported due the architecture of component
  • mobileFirst - Alternate way: Control the size of Slider just usign css on the parent class
  • prevArrow, nextArrow - Alternate way: Just put a ref on prevArrow and nextArrow
  • infinite - works as expected
  • initialSlide - works as expected
  • rows - Alternate way: Pass pages of slides instead of slides
  • slidesPerRow - Alternate Way: Pass pages of slides instead of slides
  • vertical - works as expected
  • swipe, verticalSwiping - merged into swipe - works as expected
  • touchMove - works as expected
  • draggable - works as expected
  • edgeFriction - works as expected
  • touchThreshold - fraction by which you should slide for slide to change - lies between 0 and 1
  • autoPlay, autoPlaySpeed - works as expected. Bonus: If the mounted component with autoPlay recieve autoPlay={false} then it will pause the slider.
  • zIndex - Not supported: No support for IE 9 itself requires atleast IE11
  • centerPadding - Alternate way: Use css on pages to manipulate this
  • customPaging - Alternate way: Just pass your slides in pages whatever way you want
  • waitForAnimate - This is the default behaviour of current slider. Otherwise behaviour is not implemented yet.
  • useCSS - Not supported: We don't have to fallback for jQuery animations for ancient browsers because we dont support them in first place.
  • dots, dotClass - works almost as expected. Instead of dotClass on slider give it as className in the Dots component

Remaining: slidesToShow, slidesToScroll, accessibility, rtl, pauseOnHover, pauseOnDotsHover, responsive, swipeToSlide, slide, variableWidth, centerMode, fade, lazyLoad, respondTo

Progress - Total: 43 Current: 29

Events

  • beforeChange - beforeChange(prevSlide, currSlide) but doesn't have the event handler
  • afterChange - afterChange(prevSlide, currSlide) but doesn't have the event handler
  • swipeEvent - swipeEvent(direction) but doesn't have the event handler
  • edgeEvent - edgeEvent(direction) but doesn't have the event handler
  • init, reInit - Alternate way: Can be invoke in parent components lifecycle methods.
  • destroy - Alternate way: Can be invoke in parent components lifecycle methods when the slider is taken out of the render tree.
  • setPosition - Not positions are calculated from the DOM. So, doesn't make sense.
  • breakpoint - Not implemented yet

Progress - Total: 9 Current: 8

Methods

No slick method will be supported because they encourage anti-patterns in react i.e, changing the state of child component via a parent component directly or indirectly using setState. You can add all this by passing props to the Slider component. Detailed examples will be written showing how.

Inspiration

License

MIT