caipi-slider

1.0.5 • Public • Published

Caipi Slideshow

Advanced & powerfull carousel with touch, inertia, predictable inertia targets, responsiveness, etc

Minimal drafty demo here

What's more ?

  • Pure JS; No jquery
  • React JS builds
  • No deps packages
  • Various & extensible positioning function
  • ...

Config overview

config    = {
        defaultType: 'html',
 
        /**
         * @cfg {Boolean} Infinite scroll mode
         */
        infiniteMode: true,
 
        baseZIndex: 50,
 
        /**
         * @cfg {Int} Visible items
         */
        visibleItems: 5,
 
        /**
         * @cfg {Float} Width of an item at z=0
         */
        hSlotWidth: .45,//%
 
        /**
         * @cfg {Int} Min width of an item
         */
        hMinSlotWidth_px: 0,
 
        /**
         * @cfg {Int} Max width of an item
         */
        hMaxSlotWidth_px: Infinity,
 
        /**
         * @cfg {Float} Height of an item at z=0
         */
        hSlotHeight: 1,//%
 
        /**
         * @cfg {Int} Min height of an item
         */
        hMinSlotHeight_px: 0,
 
        /**
         * @cfg {Int} Max height of an item
         */
        hMaxSlotHeight_px: Infinity,
 
        /**
         * @cfg {Int} Max height of an item
         */
        vSlotWidth      : 1,//%
        vMinSlotWidth_px: 0,
        vMaxSlotWidth_px: Infinity,
 
        vSlotHeight      : .33,//%
        vMinSlotHeight_px: 0,
        vMaxSlotHeight_px: Infinity,
 
        /**
         * @cfg {Float} Item ratio size (0-1)
         */
        forceSlotRatio: false,
 
        /**
         * @cfg {Bool} Do listen mouse wheel event
         */
        listenMouseWheel: true,
 
        /**
         * @cfg {Bool} Do listen mouse wheel event on bounds
         */
        ignoreScrollOnLoop: false,
 
        allowDragging: true,
 
        fastJump: false,
 
 
        offsetX: 0,
        offsetY: 0,
 
        /**
         * @cfg {Bool} Do use predictive momentum (knowing which item is targeted by an inertia
         */
        predictiveMomentum                : false,
        predictiveMomentum_close          : 'easeOutQuint',
        predictiveMomentum_far            : 'easeOutQuint',
        predictiveMomentum_TmR            : 1,
        predictiveMomentum_accel          : .1,
        predictiveMomentum_maxMomentumJump: Infinity,
 
        gotoEasingFn    : 'easeOutCubic',
        gotoEasingTm    : 500,
        gotoMaxEasingTm : 1000,
        magnetPower     : .35,
        showArrows      : true,
        showIndex       : true,
        autoScroll      : false,
        autoScrollTM    : 2200,
        autoScrollPeriod: 12000,
 
        stopDragEvents: true,
        pairEventsToFn: false,
 
        /**
         * can be auto
         */
        direction             : 'horizontal',
        directionLock         : true,
        positioningMethod     : 'scaleT3dMethod',
        no3d_positioningMethod: 'scaleMethod',
        ie_positioningMethod  : 'zoomMethod',
        hPositioningFn        : 'hCentralZoom2',
        vPositioningFn        : 'vCircle3d',
        preload               : 'full'
    }

Todo

  • doc, comment & clean
  • amazing anim examples
  • ...

License ?

MIT license

Readme

Keywords

none

Package Sidebar

Install

npm i caipi-slider

Weekly Downloads

1

Version

1.0.5

License

MIT

Unpacked Size

2.26 MB

Total Files

16

Last publish

Collaborators

  • caipilabs