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 */ infiniteMode: true baseZIndex: 50 /** * @cfg */ visibleItems: 5 /** * @cfg */ hSlotWidth: 45//% /** * @cfg */ hMinSlotWidth_px: 0 /** * @cfg */ hMaxSlotWidth_px: Infinity /** * @cfg */ hSlotHeight: 1//% /** * @cfg */ hMinSlotHeight_px: 0 /** * @cfg */ hMaxSlotHeight_px: Infinity /** * @cfg */ vSlotWidth : 1//% vMinSlotWidth_px: 0 vMaxSlotWidth_px: Infinity vSlotHeight : 33//% vMinSlotHeight_px: 0 vMaxSlotHeight_px: Infinity /** * @cfg */ forceSlotRatio: false /** * @cfg */ listenMouseWheel: true /** * @cfg */ ignoreScrollOnLoop: false allowDragging: true fastJump: false offsetX: 0 offsetY: 0 /** * @cfg */ 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