It seems image and content sliders are getting more and more popular amongst most websites these days. So how do you find a decent one that will be suitable for your webiste? Well, we have collected 100 jQuery image and content sliders & plugins for you to check out. Below is the first part (plugins 1-50) of our huge collection of jQuery sliders for your images and content! Watch out for the second part! Enjoy!
Related Posts:
- 100 jQuery Sliders for Images/Content (Part 2) – 51-100
- 100 jQuery WordPress Plugins
- 2,500+ Popular jQuery Plugins Directory
1. RoyalSlider
RoyalSlider for WordPress is a cross-device jQuery content slider with touch-based navigation and fluid layout. It has user-friendly admin area where you can manage slides, change slider settings, customize interface and add blocks-captions using custom WYSIWIG editor.
2. Estro – jQuery WordPress Slider
“Estro” meaning “creativity”, “talent” or “inspiration”, in Italian, is a fitting moniker for this beautiful slider. For the design of this slider we wanted to create a price of work which could form the centerpiece of your next web project.
3. Slider Evolution for WordPress
Slider Evolution is a jQuery plugin that lets you easily create powerful JavaScript sliders with very nice transition effects. Enhance your website by adding a unique and attractive slider!
4. liJQuery Image Slider
Is a jQuery plugin for WordPress carefully crafted slider/banner image rotator, full of features, easy to install and customize. It comes with intuitive – user friendly WordPress admin interface.
5. CCSlider – jQuery 3d Slideshow Plugin
CCSlider is a unique jQuery slideshow plugin. It supports 3d transitions! There are 14 stunning 3d transitions available, and also 16 stylish 2d transitions. You have the option for mentioning a 2d transition fallback for old browsers that don’t support HTML5 Canvas, which is used for producing the 3d transitions.
6. uBillboard – Premium Slider for WordPress
It is a jQuery based slider with a multitude of transitions and options for you to be able to customize it to your needs while not overwhelming you with options you never wanted or needed. Version 3 is a revolutionary release with most of the codebase rewritten from scratch.
7. Content Slider with jQuery
In this tutorial you will learn how to build a content slider with the use of jQuery only. You will be able to use the final result for commercial and personal projects also.
8. Interactive Filterable Portfolio
This great jQuery gallery plugin will help you create an interactive filterable portfolio.
9. Polaroid Photo Viewer
This jQuery plugin will help you add some awesome looking Polaroid effect to your photos.
10. Sliding Boxes and Captions
All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my CSS) that essentially acts as a window where two other items of your choosing “peek” through.
11. Moving Boxes
Moving boxes is another great slider powered by the jQuery JavaScript library.
12. jQuery Panel Gallery
With this plugin you can choose the direction in which the transition occurs from left to right, right to left, top to bottom, or bottom to top.
13. Sliding Gallery
This plug-in will take a group of images and turn them into a cyclical gallery of images which the user can click through.
14. Fancybox
It is a tool for displaying images, HTML content and multi-media in a Mac-style “lightbox” that floats overtop of the web page.
15. Smooth Div Scroll
It is a jQuery plugin that scrolls content horizontally left or right. Setting it apart from many of the other scrolling plugins that have been written for jQuery, Smooth Div Scroll does not limit the scrolling to distinct steps.
16. Slides
Is a slideshow plugin for jQuery that is built with simplicity in mind. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.
17. Fullscreenr
So you want to have a background image on your website, which always fills the screen and maintains its aspect ratio? And it has to be centered, instead of focussing at the top left corner of the image? This plugin does that.
18. Slidy
jQuery Slidy is a plugin that generates a customizable transitions automatically.
19. jQuery Easy Slides
Easy Slides is an extremely easy to use plugin for making slideshows. It also has the advantage of being fairly light weight, with both JavaScript and CSS weighing in at just under 2.1kb.
20. MobilySelect
Is a jQuery plugin (2kB) that replaces one collection of items with another.
21. Pikachoose
Is a lightweight jQuery plugin that allows easy presentation of photos with options for slideshows, navigation buttons, and auto play.
22. AviaSlider
Is a jQuery slideshow plugin with unique transition effects.
23. unoslider
Is a fully responsive, touch enabled, mobile optimized jQuery slider plugin.
24. Blueberry
Is an experimental open source jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.
25. wmuSlider
A jQuery responsive slider.
26. jQuery Responsive Thumbnail Gallery Plugin
jQuery Plugin for creating image galleries that scale to fit their container.
27. EasyRotator – Free jQuery Slider / Rotator Builder
Allows you to build impressive jQuery sliders / rotators for your webpages in minutes. Available as both a Dreamweaver extension and standalone application, it lets you select photos, choose a layout, make customizations, then have all necessary code automatically added to your page.
28. Supersized – Full Screen Background/Slideshow jQuery Plugin
Features:
> Resizes images to fill browser while maintaining image dimension ratio
> No extra whitespace, no scrollbars – the entire browser window is always filled
> Compatible in Firefox, Safari, Opera, IE7, and IE6
> Ability to cycle through images/backgrounds via slideshow
29. jQuery Infinite Carousel
With jQuery for Designer’s redesign I decided to add a scrolling carousel that worked in the same way the carousel worked on the Apple Mac ads page. This tutorial will walk through the fundamentals of the effect and how to recreate it.
30. Nivo Slider
The Nivo Slider is world renowned as the most beautiful and easy to use slider on the market. Completely free and totally open source, there literally is no better way to make your website look totally stunning.
31. Coda Slider Effect
Although Panic didn’t really invent the effect, the sliding panels on the Coda is great implementation of this effect. This article will pick apart the pieces required to create the effect, and how to better it.
32. Creating a Slick Auto-Playing Featured Content Slider
Learn how to create a slick auto-playing featured content in this tutorial.
33. jCarousel Lite
Is a jQuery plugin that carries you on a carousel ride filled with images and HTML content. Put simply, you can navigate images and/or HTML in a carousel-style widget. It is super lightweight, at about 2 KB in size, yet very flexible and customizable to fit most of our needs.
34. Popeye
Generates an inline image gallery from an unordered list of images. The gallery features clever inline image enlargement, i.e. the enlarged image stretches out over the site content without adding a visual overlay of the whole site.
35. Simple Controls Image Gallery
Rotates and displays an image by fading it into view over the previous one, with navigation controls that pop up when the mouse rolls over the Gallery.
36. flickrGallery – Dynamic Flickr Photo Gallery with Slider
Is an open-source photo gallery for jQuery that allows you to dynamically pull images from a photoset in Flickr.
37. S3 Slider – jQuery Image Gallery
To use it, include the jQuery library, s3Slider JavaScript and CSS file. Info layer about the images in the slideshow can be displayed at left, right, bottom or top. You can also set duration between slides when initializing s3Slider.
38. Easy Slider 1.5 – The Easiest jQuery Plugin for Sliding Images and Content
This version features:
> Auto slide
> Continuous sliding
> “go to first” and “go to last” button
> hiding controls
> Optional wrapping markup for control buttons
> Vertical sliding
> Multiple sliders on one page
39. Gallerific
Is a jQuery plugin that provides a rich, post-back free experience optimized to handle high volumes of photos while conserving bandwidth.
40. jQuery lightBox
Is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery´s selector.
41. Gallery View
Is a content-gallery plugin capable of displaying any HTML content in an animated gallery view. Visit the project home page for documentation and demonstrations.
42. TN3 Gallery
Is a jQuery image gallery with slideshow, transitions effects, multiple album options, CSS skinning and much more. It’s compatible with all modern desktop and mobile browsers.
43. Galleria
Is a JavaScript image gallery framework built on top of the jQuery library. The aim is to simplify the process of creating professional image galleries for the web and mobile devices.
44. Fancy Image Gallery with jQuery
Create stunning tooltips and galleries with the help of JavaScript.
45. Create Beautiful jQuery Slider
This tutorial explains how to develop Create Beautiful jQuery sliders tutorial with image description and name.
46. Sliding Boxes and Captions with jQuery
All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through.
47. Building a jQuery Image Scroller
In this tutorial, we’re going to be building an image scroller, making use of jQuery’s excellent animation features and generally having some fun with code. Image scrollers are of course nothing new; versions of them come out all the time.
48. Slider Gallery
A tutorial explaining how to create a similar effect used to showcase the products on the Apple web site.
49. Simple jQuery Image Slideshow with Semi Transparent Caption
Image Slide Show is one of the famous components in web design and development. A lot of the websites display news headlines in an image slide show to attract viewers attention, of course, with caption/excerpt. No doubt about it, this is a clever method not only to gain attentions, but it also makes the website more alive (not too static, dull).
50. Create a Slick and Accessible Slideshow Using jQuery
Learn how to create a usable and web accessible slideshow widget for your site using HTML, CSS, and JavaScript (jQuery). In the process, you’ll see the concept of Progressive Enhancement in action.
No comments:
Post a Comment