There are a lot of slider plugins that are compatible with jQuery, however, according to the requirements of your project or the way you work, you will want to implement a slider on your application that doesn't depend on any kind of framework but the library itself.
So you won't rely on the animations of jQuery (that in most cases are only used when the browser doesn't support CSS3 animation) or other libraries like this.
In this article, I'll share with you the top 5 JavaScript Plugins/libraries for Slider Animation.
Top 5 JavaScript Plugins for Slider Animation
Slidr.js
Slidr.js is a very simple, lightweight javascript library for adding slide transitions to your page. It is totally agnostic, which means that doesn't rely on another library to work.
- Add as many Slidr's as you want, even place them within each other.
- Dynamic resizing so it adapts to the size of its content unless you don't want it to.
- Keyboard navigation, you can move your cursor on top of a Slidr, and hit the arrow keys.
- Touch navigation for mobile is supported as well. Change slides by swiping left, right, up or down.
SwiperJs
Swiper is one of the most modern Mobile Ready Touch Sliders with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.
- Library Agnostic
- Rich API
- Transition Effects
- Flexbox Layout
- Images Lazy Loading
- 1:1 Touch movement
- Full True RTL Support
- Two-way Control
- Most Flexible Slides Layout Grid
- Virtual Slides
- Mutation Observer
- Multi-Row Slides Layout
- Full Navigation Control
- Parallax Transitions
- And many more ...
FLICKITY
Flickity is a useful library that allows you to create touch, responsive, flickable carousels. Flickity can be used with vanilla.js.
- draggable
- free scroll
- wrapAround
- group cells
- autoPlay
- fullscreen
- adaptiveHeight
- asNavFor
- dragThreshold
- selectedAttraction & friction
- imagesLoaded
- lazyLoad
Sly
Sly is a JavaScript library for one-directional scrolling with item-based navigation support.
- 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.
That's all built around a custom highly optimized animation rendering with requestAnimationFrame, and GPU accelerated positioning with fallbacks for browsers that don't support it.
Tiny Slider
Tiny Slider is a vanilla javascript slider that can be used for all purposes. It inspired by Owl Carousel and works on Firefox 12+, Chrome 15+, Safari 4+, Opera 12.1+, IE8+. The main features of Tiny Slider are:
- carousel / gallery
- responsive
- fixed width
- vertical slider
- gutter
- edge padding (center)
- loop
- rewind
- slide by
- customize controls / nav
- lazyload.
- autoplay.
- auto height.
- touch support.
- mouse drag.
- arrow keys.
- accessibility for people using keyboard navigation or screen readers.
- response to visibility changing.
- custom events.
- nested slider.
Top comments (0)