Use of Responsive content sliders is getting more and more popular amongst developers as they enable website designers to display content in a more organized and interesting manner while still maintaining their creative design over the orthodox slider design. Most image and content sliders are customizable and provide features and options that enhance the look and feel of a website.
In this article I have gathered 10 best responsive content sliders which will help you to organize your website data and let you achieve stunning creative looks for your websites.
1. Swiper : Free Mobile Slider
Swiper is a beautiful content slider that is built for mobile and works pretty fast as it uses hardware accelerated transitions (if available). The slider is lightweight, uses no JavaScript frameworks and has support for “touch events” whose interaction ratio can be customized. It responds to changes in orientation, has support for vertical + horizontal sliding and comes with built-in pagination control (bullets).
[zilla_button url=”http://www.idangero.us/sliders/swiper/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
2. Pure CSS Content Slider : Gallery CSS
Gallery CSS is a content slider that is built with HTML-CSS and without any JavaScript.
It is an ultra lightweight solution (less than 1kb gzipped) and comes with acceptable browser compatibility (IE9+). There is support for auto-play, items can be browsed with the ready-to-use bullet-navigation or by simply linking to any slide. The slider can display any HTML and a very useful resource for simple and fast-loading galleries.
[zilla_button url=”http://benschwarz.github.io/gallery-css/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
3. Cu3er : 3D Transitions Image Slider in Flash
CU3ER is an image slider initially conceived to create 3D transitions between slides, turned out to be a convenient and multifunction solution that can be applied in a range of website building areas, from content slider to feature slider and image & banner rotator.
If you’d like to experience more creativity in web development, are striving to more visually appealing content, and prefer to have even more unique image transitions on your websites, try the CU3ER. You can use CU3ER free of charge for your personal and/or commercial projects.
[zilla_button url=”http://www.progressivered.com/cu3er/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
4. AnythingSlider
AnythingSlider is an attempt at bringing together the functionality of “featured content” slider, “start/stop slider“, “moving boxes“ and adding new features. In other words, to create a really “full featured” slider that could be widely useful. This is a plugin, which makes implementing it and customizing it much easier.
It supports Auto-playing (start playing or stopped). Pauses autoPlay on hover is optional. Each slide has a hashtag (can link directly to specific slides). Infinite/Continuous sliding (always slides in the direction you are going, even at “last” slide).
[zilla_button url=”http://css-tricks.com/anythingslider-jquery-plugin/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
5. jQuery Slider Shock
jQuery Slider Shock is a very impressive (probably the most-customizable and feature-rich) jQuery slider plugin (with WordPress support) that comes with both free and paid versions. The plugin is capable of presenting both images and videos that are hosted locally or from external sources like RSS, YouTube, Hulu, Vimeo, Flickr, Twitter and Instagram. It has 30+ transition effects which include very original, creative ones and they can be customized as well (like the number of slices, delay or speed). Items featured can be browsed with thumbnails that can be placed on any side of the slider, prev-next buttons (multiple designs exist) or keyboard.
[zilla_button url=”http://www.jqueryslidershock.com/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
6. RefineSlide : Responsive Image Slider
RefineSlide is a lightweight (4kb gzipped) jQuery plugin for quickly integrating a responsive, image-based slider into our websites. The slider uses CSS3 transitions + 3D transforms (has JS fallback) and has a bunch of attractive transitions. It has an option to display thumbnails (auto-formatted and responsive) or arrows as the navigation (and, there is keyboard support as well).
[zilla_button url=”http://alexdunphy.github.com/refineslide/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
7. Camera
The developer of Diapo has created a fresh plugin named Camera which has more features and works very well with responsive layouts. Slides can be created with any HTML elements (images, text, videos, etc.) and Camera displays them with a good looking interface + a set of transitions. Items can be browsed with prev-next buttons or bullet navigation, a play/pause option exists and a loader informs the user about the timing of the next slide.
[zilla_button url=”http://www.pixedelic.com/plugins/camera/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
8. Royal Slider
RoyalSlider is a powerful image gallery and content slider plugin. Script is available as jQuery and as WordPress plugin. Every slider template is responsive and touch friendly. Take a look at it in your mobile device or try to resize your browser to see the effect.
[zilla_button url=”http://dimsemenov.com/plugins/royal-slider/” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
9. Lush Content Slider
Lush is a flexible content slider. It uses CSS3 native transition and animations to get the best performance taking advantage of the modern browser features, without lose functionality in older browsers. It uses a semantic syntax to describe the animation timeline avoiding complex attributes and keywords.
The animation system is completely extensible allowing to add more animations and transitions easily just like adding new CSS classes.
[zilla_button url=”http://codecanyon.net/item/lush-content-slider/3918728″ style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
10. Orbit
Orbit is a lightweight (2.8kb compressed) jQuery plugin for displaying multiple images in a limited space.
The HTML markup is pretty clean, just an element that wraps multiple images where the captions are generated from the title tags of these images. Images can be browsed using the prev-next buttons which appear on hover and there is an optional timer letting the user know when the next image will be displayed.
[zilla_button url=”http://www.zurb.com/playground/jquery_image_slider_plugin” style=”black” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
