Nonvoluntary Professional Mangling

    react-flex-slick

    0.5.0 • Public • Published

    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.

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

    Progress - Total: 43 Current: 27

    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

    Install

    npm i react-flex-slick

    DownloadsWeekly Downloads

    17

    Version

    0.5.0

    License

    MIT

    Last publish

    Collaborators

    • davelab
    • vramana