Cloudinary Blog

10 great jQuery sliders - and 5 ways to build one yourself

10 Great jQuery Sliders & Create Your Own | Cloudinary Blog
Cloudinary offers a cloud-based media management solution to help developers manage and optimize their images and videos. Because images are important to you and to us, we wanted to share our thoughts on a popular trend that highlights rotating images at the top of a website homepage - image sliders.
 
Image sliders can be used to rotate banners or allow users to browse through multiple images with animation effects and CSS3 transitions. And in our opinion, jQuery is the hands-down #1 choice for implementing sliders, so we chose to devote a post to highlight our top picks. 
 
Below is a list of 10 ready-made jQuery Sliders that provide a good solution in terms of quality, ease of user, design and features. And for those who want to get their hands dirty, we provide some of the best tutorials and code samples that will help you build your own jQuery slider.

10 jQuery Sliders Ready to Use

ResponsiveSlides.js

ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slider using elements inside a container. It works with a wide range of browsers including all IE versions from IE6 and up. It also adds css max-width support for IE6 and other browsers that don't natively support it. The only dependency is jQuery (1.6 and up supported) and that all the images are the same size.
 
Options: File links, markup, CSS, slideshow, customizable options.
License: Open Source (MIT)
 
ResponsiveSlides JS
 

OWL Carousel

A touch enabled jQuery plugin that lets you create a responsive carousel slider. Responsive, offers a useful default version but very customizable, JSON support, desktop-only support, specific browser customization.
 
Options: Slide display options, display speed, autoplay, navigation, responsive/desktop-only, CSS, lazy load, use JSON file support, callbacks and more. 
License: Open Source (MIT)
OWL Carousel Sliders

BXSlider

A fully responsive slider, popular and well-supported on Github. Slides can contain images, video or HTML. Touch and swipe support built-in. Small file size, theme and simple to implement. Uses CSS transitions for slide animation, with native hardware acceleration. Supports Firefox, Chrome, Safari, iOS Android, IE7+.
 
Options: Horizontal, vertical and fade modes, transition duration, margin between slides, starting slide, random start, slide selector, infinite loop, hiding control on end, captions, text ticker, adaptive height, animations as CSS or jQuery, preload images, swipe threshold, numbered pagination, full customization of slider controls, full callback API and public methods.
License: Open Source (MIT)
 
BXSlider 

Slick

Fully responsive, scales with its container. Popular and well-supported on Github. Uses CSS3 when available, fully functional when not. Swipe enabled, supports desktop mouse dragging and arrow key navigation.
 
Options: Separate settings per breakpoint, single/multiple items, variable width, adaptive height, lazy loading, infinite looping, add, remove, filter & un-filter slides,
autoplay, dots, arrows, callbacks.
License: Open Source
 
 Slick Sliders

Unslider

An ultra-simple jQuery slider, responsive and supports mobile with swipe. Despite being small, Unslider is flexible and extensible: you can change pretty much anything via options/settings, methods or callback events. The barebones HTML required for Unslider is just this: <div class="banner"><ul><li>This is my slider.</li><li>Pretty cool, huh?</li></ul></div>

Options: Right-to-left support, configurable animation, events, autoplay, speed, delay, keyboard control, automatic clickable navigation, arrow controls.
License: Open Source (WTFPL)
 
Unslider
 

WooThemes FlexSlider 2

A fully responsive slider. Easy-to-use markup, supported by all major browsers. Features include: horizontal/vertical slider and fade animations, multiple slider support, Callback API, hardware accelerated touch slide support and custom navigation options. 
 
Options: Installation, file links, markup, animation type, easing, direction, looping, smooth height animation, slideshow, slideshow speed, slide randomization, video, sliding with keyboard arrows or mousewheel, pause/play element.
License: Open Source (MIT)
 
WooThemes FlexSlider 2 

Swiper

Mobile touch slider with hardware-accelerated transitions. Intended to be used in mobile websites, mobile web apps and mobile native/hybrid apps. Primary support for iOS and also for Android, Windows Phone 8.
 
Options: Initialization, hash navigation, parallax, lazy loading, emitter API/events, HTML layout, CSS styles/size, CDN support.
License: Open Source (MIT)
 
Swiper Sliders

Super Simple Slider

Simple and small, includes arrow key support, works with any HTML content, browser friendly and responsive.
 
Options: Slideshow, order slide display, transition, speed, show/hide navigation. 
License: Open Source (WTFPL)
 
Super Simple Slider 

Basic jQuery Slider

Developed to be as simple and lightweight as possible, with clean semantic markup. 
 
Options: Responsive, width/height, animation, control/marker configuration, interaction, presentational options. 
License: Free
 
Basic jQuery Slider 
Demo and Documentation / Download

Animate Slider

A jQuery Slider plugin with specific animations for each element. Uses predefined animation classes and adds them to each slider element and also allows addition of classes with delay for each animation. 
 
Options: Autoplay, time, animations, fade/bounce/rotate/enter left or right, delay slide display. 
License: Open Source (MIT)
 
Animate Slider 

5 Ways to Build Your Own Slider

We collected a few great write ups from across the web showing step by step how you can easily create your own slider.
 
 
Site Point Sliders 
 
Christian Heilmann Sliders 

 
Design Chemical Sliders 

 
JC Designs Sliders 

Liquidosity - A Super Simple jQuery Fading Slideshow Tutorial
 
Liquidosity Sliders
 

Summary

We hope you enjoyed this compilation of different ways to build sliders on your site using jQuery. If you’re a user of jQuery and have additional image-related tasks on your website, or want some help preparing and optimizing the images for your slider, check out Cloudinary’s jQuery integration. We offer a very easy way to upload images, deliver them to users via CDN, and perform advanced image manipulations on the fly with one line of code. If you want to try it out, sign up for our free plan
 
And of course, please let us know in the comments below if you’ve tried out any of the sliders of code samples above and have any thoughts, and if you can share additional jQuery-based slider solutions. Here are additional resources about uploading images using jQuery.

Recent Blog Posts

CoreMedia Adds Cloudinary to its CoreMedia Studio Platform

Today we’re pleased to announce a new technology partnership with CoreMedia, a leading Content Experience Platform provider. CoreMedia users can now leverage Cloudinary’s web-based digital asset management (DAM) solution to organize, search, manage and optimize their media assets, including images and videos, and to orchestrate, preview and deliver digital experiences consistently and optimized across all channels and browsers. The official press release is available here.

Read more
Facial-Surveillance System for Restricted Zones

In Africa, where Internet access and bandwidth are limited, it’s not cost-effective or feasible to establish and maintain a connectivity for security and surveillance applications. That challenge makes it almost impossible to build a service that detects, with facial-recognition technology, if someone entering a building is authorized to do so. To meet the final-year research requirement for my undergraduate studies, I developed a facial-surveillance system. Armed with a background in computer vision, I decided to push the limits and see if I could build a surveillance system that does not require recording long video footage.

Read more
Complex Networks Case Study

Complex Networks has been using Cloudinary since 2014 to manage and optimize images across seven websites and two mobile apps, making editorial workflow more efficient, improving page performance and load time, and increasing user engagement. Cloudinary was instrumental in enabling Complex Networks to redesign its web properties. Without the flexibility that Cloudinary offers to both creative and development teams, it would not have been possible for Complex Networks to achieve such a fast time to market.

Read more
Automate Placeholder Generation and Accelerate Page Loads

If you run a Google search on LQIP you’ll see very few relevant articles, very little guidance, and definitely no Wikipedia articles. In this post, we’ll discuss some of the feedback on LQIP we have gathered from the community and suggest and open for conversation a few approaches based on the built-in capabilities of the Cloudinary service. Specifically, we’ll explain what LQIP are, where they are best used, and how you can leverage them to accelerate page loads and optimize user experience.

Read more
Best Practices for Optimizing Web Page Speed

If you're like most consumers today, you engage more with pictures or videos on a website than text. The stats don't lie - four times as many visitors would rather watch a video about a product than read about it, and sites with compelling images average twice as many views as text-heavy ones.

Read more
A day of fun with Girls Who Code and Cloudinary

During both my computer science studies and work in the tech field, there have not been a lot of women present. While our ranks have grown, women still make up only a small percentage. In many ways, I think the traditionally male-dominated world can be intimidating to women and girls who may be interested in pursuing these types of tech careers.

Read more