Sly

JavaScript library for one-directional scrolling with item based navigation support. 14KB minified, 6KB gzipped.

Sly supports navigation with:

• mouse wheel scrolling
• scrollbar (dragging the handle or clicking on scrollbar)
• pages bar
• various navigation buttons
• content dragging with mouse or touch
• automated cycling by items or pages
• lots of super useful methods

... and has a powerful & developer friendly API!

That's all build around a custom highly optimized animation rendering with requestAnimationFrame, and GPU accelerated positioning with fallbacks for browsers that don't support it.

Dependencies

• jQuery 1.7+

Thats it. You don't need 200kB of jQuery-UI to Sly :)

Compatibility

Works everywhere, even in IE6+ abominations, but that is a complete accident :) IE 6-7 are not officially supported.

Mobile: Sly has a touch support, but mobile is not tested. If you want to help with that, you are welcome!

Changelog

Sly upholds the Semantic Versioning Specification.

Forum

Please do not populate Issues tracker with non-issues! If you have a question about Sly, you can use the Sly forum.

API documentation

• Markup - how should the HTML look like
• Calling - how to call Sly
• Options
• Properties
• Methods
• Events
• Parallax

Quick reference

Call via a jQuery proxy with all default options as defined in the source. Visit the Options Wiki page for more detailed documentation.

$('#frame').sly({
	horizontal: 0, // Change to horizontal direction.

	// Item based navigation
	itemNav:      null, // Item navigation type. Can be: 'basic', 'centered', 'forceCentered'.
	itemSelector: null, // Select only items that match this selector.
	smart:        0,    // Repositions the activated item to help with further navigation.
	activateOn:   null, // Activate an item when it receives this event. Can be: 'click', 'mouseenter', ...
	activateMiddle: 0,  // In forceCentered navigation, always activate the item in the middle of the FRAME.

	// Scrolling
	scrollSource: null, // Selector or DOM element for catching the mouse wheel scrolling. Default is FRAME.
	scrollBy:     0,    // Number of pixels/items for one mouse scroll event. 0 to disable mouse scrolling.

	// Dragging
	dragSource:    null, // Selector or DOM element for catching dragging events. Default is FRAME.
	mouseDragging: 0,    // Enable navigation by dragging the SLIDEE with mouse cursor.
	touchDragging: 0,    // Enable navigation by dragging the SLIDEE with touch events.
	releaseSwing:  0,    // Ease out on dragging swing release.
	swingSpeed:    0.2,  // Swing synchronization speed, where: 1 = instant, 0 = infinite.
	elasticBounds: 0,    // Stretch SLIDEE position limits when dragging past FRAME boundaries.

	// Scrollbar
	scrollBar:     null, // Selector or DOM element for scrollbar container.
	dragHandle:    0,    // Whether the scrollbar handle should be draggable.
	dynamicHandle: 0,    // Scrollbar handle represents the ratio between hidden and visible content.
	minHandleSize: 50,   // Minimal height or width (depends on sly direction) of a handle in pixels.
	clickBar:      0,    // Enable navigation by clicking on scrollbar.
	syncSpeed:     0.5,  // Handle => SLIDEE synchronization speed, where: 1 = instant, 0 = infinite.

	// Pagesbar
	pagesBar:       null, // Selector or DOM element for pages bar container.
	activatePageOn: null, // Event used to activate page. Can be: click, mouseenter, ...
	pageBuilder:          // Page item generator.
		function (index) {
			return '<li>' + (index + 1) + '</li>';
		},

	// Navigation buttons
	forward:  null, // Selector or DOM element for "forward movement" button.
	backward: null, // Selector or DOM element for "backward movement" button.
	prev:     null, // Selector or DOM element for "previous item" button.
	next:     null, // Selector or DOM element for "next item" button.
	prevPage: null, // Selector or DOM element for "previous page" button.
	nextPage: null, // Selector or DOM element for "next page" button.

	// Automated cycling
	cycleBy:       null, // Enable automatic cycling by 'items' or 'pages'.
	cycleInterval: 5000, // Delay between cycles in milliseconds.
	pauseOnHover:  0,    // Pause cycling when mouse hovers over the FRAME.
	startPaused:   0,    // Whether to start in paused sate.

	// Mixed options
	moveBy:        300,     // Default speed in pixels per second used by forward & backward buttons.
	speed:         0,       // Duration based animations speed in milliseconds. 0 to disable animations.
	easing:        'swing', // Easing for duration based (tweening) animations.
	startAt:       0,       // Starting offset in pixels or items.
	keyboardNavBy: 0,       // Enable keyboard navigation by 'items' or 'pages'.

	// Classes
	draggedClass:  'dragged',  // Class for dragged elements (like SLIDEE or scrollbar handle).
	activeClass:   'active',   // Class for active items and pages.
	disabledClass: 'disabled'  // Class for disabled navigation elements.
});

Roadmap

All of the desired features have been implemented.

Maaaaybe never, but I'd liked to:

• Dropping jQuery dependency, and transforming Sly into a Component compoment.
• RTL layout support.

Contributing

Please, read the Contributing Guidelines for this project.