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