sly
JavaScript library for one-directional scrolling with item based navigation support.
Top Related Projects
🦎 A jQuery plugin for extracting the dominant color from images and applying the color to their parent.
Most modern mobile touch slider with hardware accelerated transitions
A positioning engine to make overlays, tooltips and dropdowns better
Stand-alone parallax scrolling library for mobile (Android + iOS) and desktop. No jQuery. Just plain JavaScript (and some love).
Quick Overview
The darsain/sly project is a lightweight, flexible, and highly customizable jQuery plugin for creating horizontal and vertical scrolling interfaces. It provides a set of features and options to enhance the user experience of scrolling content on web pages.
Pros
- Lightweight: The plugin is designed to be lightweight, with a small footprint and minimal dependencies.
- Flexible: It offers a wide range of customization options, allowing developers to tailor the scrolling behavior to their specific needs.
- Cross-browser Compatibility: The plugin is designed to work across a wide range of modern browsers, ensuring a consistent user experience.
- Active Development: The project is actively maintained, with regular updates and bug fixes.
Cons
- jQuery Dependency: The plugin requires the use of the jQuery library, which may not be necessary for all projects.
- Limited Functionality: While the plugin is highly customizable, it may not provide all the features and functionality required for complex scrolling interfaces.
- Learning Curve: Developers may need to invest time in understanding the plugin's API and configuration options to fully utilize its capabilities.
- Potential Performance Issues: Depending on the complexity of the scrolling interface and the amount of content, the plugin may have performance implications on certain devices or browsers.
Code Examples
Here are a few examples of how to use the darsain/sly plugin:
- Basic Horizontal Scrolling:
$('#horizontal-scroller').sly({
horizontal: 1,
itemNav: 'basic',
smart: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 0,
scrollBar: $('#horizontal-scroller-bar'),
scrollBy: 1,
pagesBar: $('#horizontal-scroller-pages'),
activatePageOn: 'click',
speed: 300,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1
});
- Vertical Scrolling with Paging:
$('#vertical-scroller').sly({
vertical: 1,
itemNav: 'basic',
smart: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 0,
scrollBar: $('#vertical-scroller-bar'),
scrollBy: 1,
pagesBar: $('#vertical-scroller-pages'),
activatePageOn: 'click',
speed: 300,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1
});
- Nested Scrolling:
$('#nested-scroller').sly({
horizontal: 1,
itemNav: 'basic',
smart: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 0,
scrollBar: $('#nested-scroller-bar'),
scrollBy: 1,
pagesBar: $('#nested-scroller-pages'),
activatePageOn: 'click',
speed: 300,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1,
scrollSource: '#nested-scroller-content'
});
Getting Started
To get started with the darsain/sly plugin, follow these steps:
- Include the jQuery library and the
sly.jsfile in your HTML:
<script src="https://code.jquery.com/jquery-3.6.0.
Competitor Comparisons
🦎 A jQuery plugin for extracting the dominant color from images and applying the color to their parent.
Pros of jquery.adaptive-backgrounds.js
- Focuses on color adaptation, providing automatic background color selection based on image content
- Lightweight and easy to integrate into existing jQuery-based projects
- Enhances visual aesthetics by creating cohesive color schemes
Cons of jquery.adaptive-backgrounds.js
- Requires jQuery, which may not be ideal for modern projects moving away from this dependency
- Limited in functionality compared to Sly, which offers more comprehensive scrolling and navigation features
- May have performance implications when processing large images or multiple elements simultaneously
Code Comparison
jquery.adaptive-backgrounds.js:
$.adaptiveBackground.run({
parent: '.container',
exclude: [ 'rgb(0,0,0)', 'rgb(255,255,255)' ]
});
Sly:
var $frame = $('#frame');
var sly = new Sly($frame, {
horizontal: 1,
itemNav: 'forceCentered',
smart: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 0,
scrollBar: $frame.find('.scrollbar'),
scrollBy: 1,
speed: 300,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1
});
sly.init();
Most modern mobile touch slider with hardware accelerated transitions
Pros of Swiper
- Swiper is a feature-rich and highly customizable carousel/slider library, offering a wide range of options and features.
- Swiper has a large and active community, with extensive documentation and a wealth of community-contributed resources.
- Swiper is well-maintained and regularly updated, ensuring compatibility with the latest web technologies.
Cons of Swiper
- Swiper may have a steeper learning curve compared to Sly, especially for developers who are new to carousel/slider libraries.
- Swiper's codebase is larger and more complex than Sly, which may result in a larger bundle size for some projects.
- Swiper may have a higher overhead in terms of initial setup and configuration compared to the more lightweight Sly.
Code Comparison
Sly:
// Initialize Sly
var frame = new Sly('#frame', {
horizontal: 1,
itemNav: 'basic',
smart: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 0,
scrollBy: 1,
speed: 300,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1
}).init();
Swiper:
// Initialize Swiper
var swiper = new Swiper('.swiper-container', {
slidesPerView: 3,
spaceBetween: 30,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
A positioning engine to make overlays, tooltips and dropdowns better
Pros of Tether
- Tether provides a more comprehensive set of features, including support for various positioning strategies, scrolling, and event handling.
- The Tether library has a larger community and more active development, with more contributors and a higher number of issues and pull requests.
- Tether offers better documentation and more detailed examples, making it easier for developers to get started and understand the library's capabilities.
Cons of Tether
- Tether has a larger file size and dependency footprint compared to Sly, which may be a concern for projects with strict performance requirements.
- The Tether API can be more complex and verbose, requiring more code to achieve the same functionality as Sly in some cases.
- Tether may have a steeper learning curve for developers who are new to the library or are looking for a more lightweight solution.
Code Comparison
Sly:
var sly = new Sly('.frame', {
horizontal: 1,
itemNav: 'basic',
smart: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 3,
scrollBy: 1,
speed: 300,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1,
prevPage: '.prev',
nextPage: '.next'
}).init();
Tether:
var tether = new Tether({
element: '.element',
target: '.target',
attachment: 'top left',
targetAttachment: 'top right',
offset: '0 20px',
targetOffset: '0 20px',
constraints: [
{
to: 'window',
attachment: 'together'
}
]
});
Stand-alone parallax scrolling library for mobile (Android + iOS) and desktop. No jQuery. Just plain JavaScript (and some love).
Pros of Skrollr
- Skrollr provides a more comprehensive set of features for creating complex scrolling animations, including support for parallax effects and custom easing functions.
- Skrollr has a larger and more active community, with more documentation and third-party resources available.
- Skrollr is more actively maintained, with regular updates and bug fixes.
Cons of Skrollr
- Skrollr has a larger footprint and may be overkill for simpler scrolling animations.
- Skrollr's configuration and setup can be more complex, especially for beginners.
- Skrollr may have a steeper learning curve compared to Sly.
Code Comparison
Sly:
var $frame = $('.frame').sly({
horizontal: 1,
itemNav: 'forceCentered',
smart: 1,
activateMiddle: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 3,
scrollBy: 1,
speed: 300,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1
});
Skrollr:
var s = skrollr.init({
forceHeight: false,
smoothScrolling: true,
smoothScrollingDuration: 300,
easing: {
WTF: Math.random,
inverted: function(p) {
return 1 - p;
}
}
});
Convert 
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Sly
JavaScript library for one-directional scrolling with item based navigation support.
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+
Compatibility
Works everywhere, even in IE6+ abominations, but that is a complete accident :) IE 6-7 are not officially supported.
Forum
Forum is for questions. Issues are for bug reports and feature requests. Don't mix the two :)
Usage
Constructor:
var options = {
horizontal: 1,
itemNav: 'basic',
speed: 300,
mouseDragging: 1,
touchDragging: 1
};
var frame = new Sly('#frame', options).init();
jQuery proxy:
var options = {
horizontal: 1,
itemNav: 'basic',
speed: 300,
mouseDragging: 1,
touchDragging: 1
};
$('#frame').sly(options);
jQuery proxy is good when you want to create an instance and forget about it. For anything more complex, like using methods, events, accessing instance properties, ... use the constructor and work with the instance directly.
Download
Latest stable release:
- Production
sly.min.js- 16KB, 7KB gzipped - Development
sly.js- 55KB
When isolating issues on jsfiddle, you can use this URL:
Documentation
Can be found in the docs directory.
Contributing
Please, read the Contributing Guidelines for this project.
License
MIT
Top Related Projects
🦎 A jQuery plugin for extracting the dominant color from images and applying the color to their parent.
Most modern mobile touch slider with hardware accelerated transitions
A positioning engine to make overlays, tooltips and dropdowns better
Stand-alone parallax scrolling library for mobile (Android + iOS) and desktop. No jQuery. Just plain JavaScript (and some love).
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot