A jQuery slider or jQuery carousel can be very useful to feature important content on nearly any web site. The jQuery library has undoubtedly made the life of JavaScript programmers easier and made it possible for non-experts to do fancy stuff themselves. With jQuery, we can do a lot of really advanced and dynamic things by writing just few lines of codes. Since its arrival, jQuery has revolutionized the way we do a great variety of web designing and developing tasks. With jQuery, we can create not only simple photo gallery or slides but also some fancy animation schemes using texts and other objects.
Because jQuery effects work wonders in our designs, it makes sense that we take steps to acquire a size-able collection of ready to use plugins in various categories. To make things easy, we are showcasing a substantial array of awesome jQuery effects web designers and developers must have so that they can save time in finding the right solution for their design concepts.
Take a look at this amazing round-up of jQuery effects and enjoy! If you find it hard to implement the jQuery sliders or just need some advice I recommend you visit ourweb development forum.

Disclosure: Please note that some of the links below are affiliate links and I will earn a commission if you purchase through those links (at no extra cost to you). I recommend that you do your own independent research before purchasing any product or service. This article is not a guideline, a recommendation or endorsement of specific products.

Advertisement

JQUERY SLIDER AND EFFECTS INDEX

JQUERY SLIDER, SLIDESHOW AND JQUERY CAROUSEL EFFECTS

1. 3D ROTATION VIEWER

image
MORE INFO / DEMO (free jQuery plugin)
This cool stuff easily creates a 3D rotation viewer in UIZE that lets users rotate the view of an object a full 360 degrees using a mouse, or finger on the Apple iPad.

2. JQUERY BANNER ROTATOR / JQUERY SLIDER

jquery banner
This is a jQuery banner rotator plugin featuring multiple transitions. The thumbnails and buttons allow for easy navigation of your banners/ads. The banner rotator is also re-sizable and configurable through the plugin's parameters.
MORE INFO / DEMO – by CodeCanyon (premium plugin)

3. HTML5 JQUERY SLIDER

image
This effect creates progressively enhanced slideshow with a fancy transitioning effect.
MORE INFO / DEMO (free jQuery plugin)

4. AVIA SLIDER

image

This plugin features 8 unique transition effects, image preloader, autoplay that stops on user interaction and lots of easy to set options to create your own effects.
MORE INFO / DEMO – by CodeCanyon (premium plugin)

5. ESTRO JQUERY EFFECT SLIDER

ESTRO JQUERY EFFECT SLIDER

This jQuery plugin uses unobstrusive javascript to transform a block of simple HTML markup into a georgous elegant slider, which can be completely customized using HTML5 data attributes. The markup is valid HTML5 and SEO optimzied, with all content always being available to search engines. When using this plugin, your page layout will be consistent even if javascript has been disabled.
This slider includes a smooth and powerful Ken Burns effect which is completely configurable and compatible with all major browsers (including ie7 to ie9, Firefox Chrome, Opera, Safari) and mobile platforms like iphone / ipad. If the Ken Burns effect is not your thing, that's OK because the "Estro" slider also includes a 2-way "Swipe" mode with configurable transitions.
MORE INFO / DEMO – by CodeCanyon (premium plugin)

6. SEXY SLIDER

sexy slider
SexySlider is a jQuery slider plugin that lets you easily create powerful javascript Sliders with very nice transition effects. Enhance your website by adding a unique and attractive slider!
MORE INFO / DEMO – by CodeCanyon (premium plugin)

7. HIGHSLIDE JS

image
Highslide JS is an image, media and gallery viewer written in JavaScript.
MORE INFO / DEMO (free jQuery plugin)

8. CROSSSLIDE

image
CrossSlide is a jQuery slider plugin implementing in 2kB of Javascript code some common slide-show animations, traditionally only available via Adobe Flash or other proprietary plugins. CrossSlide builds upon jQuery's animation facility, so it is as portable across browsers as jQuery itself.
MORE INFO / DEMO (free jQuery plugin)

9. PANNING SLIDESHOP

image
This slideshow has the ability to showcase imagery automatically. This is a twist from classic slideshows which uses a kind of transition to animate between slides.
MORE INFO / DEMO (free jQuery plugin)

10. Supersized jQuery plugin

image
Supersized jQuery plugin is a full screen background and slideshow that you can use to satisfy the craving of your clients for big and wonderful pictures.

11. Coin Slider

image
This jQuery slider features smooth transition effects and is compatible with Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+

12. Sliding Boxes and Captions

image
The animation of the sliding element of this plugin either show or cover up the viewing area, thus creating the sliding effect.

13. Polaroid Photo Viewer

image
You can see your images as if it were stacked one on top of the other with this glamorous effect.

15. Thumbnails Navigation Gallery with jQuery

image
Thumbnails Navigation Gallery with jQuery is an extraordinary gallery with scrollable thumbnails that slide out from a navigation. It has a menu of albums where each item can reveal a horizontal bar with thumbnails when clicked. The thumbnails container will scroll automatically when the user moves the mouse to the left or the right.

16. Step Carousel Viewer

image
Step Carousel Viewer displays images or even rich HTML by side scrolling them left or right. Users can step to any specific panel on demand, or browse the gallery sequentially by stepping through x number of panels each time. A smooth sliding animation is used to transition between steps.

17. Revealing Photo Slider

image
This slider has thumbnail photo gallery, where clicking a button would reveal the entire photo and more information about that photo.

18. Sideways – Fullscreen Gallery

image
Sideways is a simple, yet elegant fullscreen image gallery created with the jQuery framework and some simple CSS.

19. Nivo Slider

image
Nivo slider is an awesome jQuery slider that features smooth transition, keyboard navigation and html captions.

20. Slick Auto-Playing Featured Content Slider

image
Slick Auto-Playing Featured Content jQuery slider has is a main content area, which slides from left to right each with different unique content.

21. SlideDeck

image
With SlideDeck, you can organize any type of web content into a beautiful and user-friendly slider.

22. DualSlider

image
With DualSlider, you can slide your images while leaving a space for the description and other details.

23. JCoverflip

image
jCoverflip has been developed to enable fast and granular customization of the look and feel and feature set.

24. Flip Box

image
Flip is a jQuery plugin that will flip easily your elements in four directions.

25. ImageFlow

image
ImageFlow is an unobtrusive and userfriendly JavaScript image gallery.

26. PieceMaker

image
Piecemaker is a open source Flash image slider that displays images with 3D slice effects. The slide images can be configured from a XML file like setting the tween type, distance, time, delay, etc.

27. Text with Moving Backgrounds

image
This jQuery effect has some sort of a container which has a moving background, but only set of letters is visible of the background. It will be as if there are holes in your container.

28. Magic Scroller

image
Scroll your elements with this nice effect which is easy to install. With magic scroller, you can scroll your display vertically to expose its elements, iframes, or imáges. As a precondition all the elements have to be of equal size, and the mask needs to be proportional to the elements per row.

29. jQuery Animated Innerfade

image
jQuery Animated Innerfade is slideshow based on the work of Torsten Baldes. It has additional functions: slide effect on large images, 'prev', 'pause', 'next' functions, an optional background frame, and a title panel.

30. Pikachoose

image
PikaChoose is a lightweight jQuery slider plugin allowing for easy presentation of photos with carousels and lightboxes! Pikachoose is designed to be easily installed and easy to setup.

31. MopSlider

image
MopSlider can accommodate any number of items. It is also very easy to use.

32. jQuery Slinky Slider

image
Slinky Slider is a jQuery plugin that loads HTML files into panels to be shown inside a nominated
. Once the panels have been loaded, all bar one are collapsed. An automatic animation cycles through the panels showing the content of each in turn. When the user mouses over a panel, it expands and the automatic animation stops. The panels can contain full HTML, or just image references.

33. jQuery.SerialScroll

image
This plugin allows you to easily animate any series of elements, by sequentially scrolling them. It is a very unrestricted plugin, that lets you customize pretty much everything from outside. You can use horizontal or vertical scroll. This jQuery.SerialScroll doesn't have one definite purpose. It's generic and adaptable. You can certainly use it as a screen slider and text scroller. You can even build an automatic news ticker.

34. Anything Slider

image
AnythingSlider brings together the functionality of all previous sliders and their features.

35. Zoomer Gallery jQuery Plugin

image
This jQuery effect, zooms your images inside a beautiful gallery once your mouse is on top of it. It does so in a flashy zoom style.

36. jQuery Plugin for Zoomable, Interactive Maps

image
In this jQuery effect, each location on the map would be represented by a bullet. Clicking the bullet would bring up more information on the location. Since the locations of the bullets tended to be highly clustered, zooming into select subregions was possible.

37. Galleria

image
Galleria is a JavaScript image gallery framework built on top of the jQuery library. Its goal is to simplify the process of creating professional image galleries for the web and mobile devices.

38. BBC Radio 1 Zoom Tabs

image
This jQuery effect that can be used as a gallery to where pictures can be presented in a nice slide that automatically changes pictures the moment a mouse is on top of a navigation button.

39. Leopard Desktop with jQuery

image
This effect features elements that can be dragged and icons and buttons that zoom in when the mouse run on it.

40. Contextual Slideout Tips With jQuery & CSS3

image
This effect is an easily configurable set of contextual slideouts. Each can be opened in one of four directions – bottom-right (default), bottom-left, top-left and top-right, and each can be in one of three colors – green (default), blue, and red.

41. Animated fullscreen background image slideshow

image
Changing the background can be done using this effect. A nice textbox can also be added to show information which is simultaneously displayed with the background.

42. Gallery Using z-index and jQuery

image
You can create an effect where pictures are animated to look like they were discarded one after the other by clicking. This is made using z-index and jQuery.

43. Background Image Navigation with jQuery

image
This is a beautiful navigation that has a background image slide effect. It has three list items that contain the same background image but with a different position. The background image for each item is animated to slide into place in different times, creating a really nice effect.

44. Morphing Gallery

image
A gallery that "morphs" images between transitions.

45. Slide Thumbs

image
With jQuery and some lines of jave-script code, you can turn your boring image viewer into a cool and elegant feature to wow your visitors. This is what this Slide Thumbs can do.

46. Presentation Cycle

image
Presentation Cycle is a variation on the functionality of Cycle. Instead of generating a list of numbers that are clickable Presentation Cycle generates a progress bar that shows when the new slide will appear.

47. iTunes-like Slider

image
A simple slider/slideshow which mostly emulates the one on iTunes barring few changes.

48. iCarousel

image
iCarousel is an open source (free) javascript tool for creating carousel like widgets.

49. Minimalistic Slideshow Gallery with jQuery

image
Minimalistic Slideshow Gallery with jQuery is a beautiful slideshow gallery that can be easily integrated in your web site. It has a container with a slideshow and the options to view a grid of thumbnails, pause the slideshow, and navigate through the pictures. The thumbnail grid will slide out from the top and allow the user to navigate through a set of thumbnails.

50. Related Posts Slide Out Boxes with jQuery and CSS3

image
This awesome effect works like a little widget that can be used to show related posts in any page. It shows a fixed list at the right side of the screen with some thumbnails sticking out. When the user hovers over the items, they slide out, revealing the title and two links, one for the related article itself and one for the demo.

51. Compact News Previewer with jQuery

image
This acts as a news previewer that lets you show your latest articles or news in a compact way. The news previewer will show a list of articles on the left side and the preview of the article with a longer description on the right. Once a news on the left is clicked, the preview will slide in.

52. Annotation Overlay Effect with jQuery

image
You can create a simple overlay effect to display annotations in e.g. portfolio items of a web designers portfolio using jQuery.

53. BxSlider 2.0

image
BxSlider is a jQuery content slider and image slideshow that features horizontal, vertical, fade transitions and display and move multiple slides at once (carousel).

54. Lof JSliderNews

image
Use this stunning slider to entertain your readers while scrolling what feature your website has. It has a very smooth user interface that gives your image an added aesthetic appeal.

55. Image Rotator with Preview

image
An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery.

56. Cloud Carousel

image
This carousel features optional auto-reflections, and the information contained in the Alt and Title tags of the images can optionally be displayed as you hover over each image.

57. jQuery popeye 2.0

image
This popeye-box uses the standard options: it floats to the left and opens to the right, its navigation and caption show on mouseover. By placing the navigation inside the stage area (where the image is displayed), we can get it to hover above the image.

58. Control Tabs

image
Control Tabs creates a tabbed interface from an unordered list of links/anchors that point to any elements on your page that have an id attribute. Since it attaches these behaviors to HTML that already has semantic meaning, it will degrade gracefully for browsers that do not support JavaScript, and is search engine friendly. It attaches in one line of code for simple use cases, but is highly customizable and can be used in a variety of edge cases.

59. YoxView

image
YoxView is a free Lightbox-type media and image viewer jQuery plugin. It's easy to use and feature-rich.

60. BlogSlideShow

image
BlogslideShow is a free open code JQuery plugin that enhances your blog pages with fancy image viewer, which provides nice transition effects including CSS3/HTML5-related ones.

61. jQuery Tiny Slider

image
jQuery Tiny Slider is a small and lightweight jQuery-plugin to create simple inline slideshow.

62. jReel Gallery

image
This little jQuery image gallery plugin recreates the standard built-in window scrolling with a smooth easing effect.

63. Smooth Div Scroll

image
Smooth Div Scroll is a jQuery plugin that scrolls content horizontally left or right. 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. As the name of the plugin hints, scrolling is smooth. There are no visible buttons or links since the scrolling is done using hotspots within the scrollable area or via autoscrolling.

64. s3Slider jQuery plugin

image
The s3Slider jQuery plugin is slideshow that displays objects with layers that can be positioned anywhere over it.

65. Sliding Login Panel

Sliding log-in
As the name suggests, this plugin works by sliding down the panel to reveal the log-in box when clicked.

66. jQuery Slideshow using CSS Sprites

image
This cool slideshow has a very smooth animated transition and customizable animation orchestration that works great in all popular browsers.

67. jqGalScroll

image
jQuery Gallery Scroller (jqGalScroll) takes list of images and creates a smooth scrolling photo gallery scrolling vertically, horizontally, or diagonally. The plugin will also create pagination to allow you to flow through your photos.

68. Multiple Image Cross Fade

image
This amazing effect flips the object in several views and angles without sliding. This is a nice way to impress your clients.

69. Fancybox

image
FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page.

70. jQuery Cycle Plugin

image
The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more.

71. jQuery Image Scroller

image
This scroller is different from others because it is completely autonomous and will begin scrolling once the page loads.

Text Effects

72. jQuery Word Counter

image
This plugin allows you to set and limit user input by max characters within html textarea (it is only limited by characters other than words). It binds keyup, paste and drag events.

73. jQuery FontEffect

image
Font effect is a jQuery plugin that add some effect to html text.

74. jTicker Typing Text Effect using jQuery

image
jTicker is a jQuery plugin that can be used for creating text effect without the use of flash. This effect comes in handy when you want to force the visitor to read the text. But should be used wherever necessary, as the usability suffers. jTicker can be declared on any element and can be stylized using CSS. You can also use event buttons to play, stop and control the speed of the effect.

75. Codename Rainbows

image
Even without Photoshop, you can make text effects with this by just typing a little code.

76. Grab bag, jQuery text effects

image
With grab bag jQuery plug-ins, you can have different effects to the text.

77. Color Changing Text and Backgrounds Effects

image
This effect can be used to change the colors and background of your object in a flashing style.

78. Fade Colors Using jQuery

image

79. Playing with jQuery Color Plugin and Color Animation

image
This is the tool if you want to change the color of the text and icons once your mouse is pointed to it.

80. jQuery Approach

image
Approach is a jQuery plugin that allows you to animate style properties based on the cursor's proximity to an object. It works in a very similar manner to jQuery animate. However it animates over distance instead of time.

81. AutoCompleter

image
With autocompleter, your site becomes more user friendly by providing suggestions when a text is entered.

82. 3d Tag Sphere

image
A rotating 3d tag cloud controlled with the mouse. Tags are scaled according to the weight assigned to them and fade into the background as they rotate.

83. Simple jQuery Text Resizer

image
Simple jQuery Text resizer adjusts the size of your text for easier readability by clicking the icon.

84. Airport

image
Airport is a rather simple text effect plugin for Jquery. It emulates the style of those flickering information boards you sometimes find on airports and train stations.

85. Zooming with jQuery

image
This effect allows the reader to zoom the text for better reading.

86. jQuery Label Effectsimage

A jQuery plugin that applies highlight and shadow effects to text in a control.

87. jQuery Flying Text With Fade Effect

image
With this great javascript framework, you can create some flash-like, very simple flying and fading text effect using jQuery.

Animation Effects

88. jQuery CSS3 3D Animation

image
This jQuery effect reacts if you move your mouse around. If it hits one of the cartoons a text will flash and move around the page.

89. Image Cube

image
The image cube functionality can easily be added to a division with appropriate default settings. It then displays the images contained within the targetted division in a cycle every two seconds. A random rotation is chosen each time to move to the next image. Highlights and shadows are used to enhance the 3D effect.

90. jQuery.Smart3D

image
This is an effect which can be used on site-header. It's very simple to use: several layers glued together into a 3D effect.

91. jQuery 3D Rotator

image
This is a very stunning text effect. The texts are swirling like cosmic bodies in the galaxy as it shines against a black background. The speed and the direction of revolution of the texts depend on the location of the mouse.

92. 3D Sphere

image
In this effect the elements move in a way that they look as if it were one rotating sphere.

93. 3D Tag Cloud

image
This works like a carousel but the elements fades into the distance at the end. It also interacts with the mouse. The greater the distance of the mouse from the center the faster it rotates.

94. Flip HTML content in 3D

image
Rotate3Di is a jQuery Effect Plugin that makes it possible to do an isometric 3D flip or 3D rotation of any HTML content. It also enables custom 3D rotation animations. CSS3 Transforms are used to create this visual "3D" isometric effect.

95. Circulate

image
This is a very amusing plugin. Once you open it, the object will revolve around the page and if you click the buttons, it will jump in a circular motion and bounce back into position.

96. Spritely

image
jQuery spritely is a jQuery plugin created by Artlogic for creating dynamic character and background animation in pure HTML and JavaScript. It's a simple, light-weight plugin with a few simple methods for creating animated sprites such as the birds you see on this page, and dynamic scrolling backgrounds. You can use it on any html web page, and any part of the page can interact with a sprite (click anywhere on this page and wait and you'll see what we mean).

97. Animated Curtain

image
With this effect you can animate a curtain to open to show a text or image the moment the rope is clicked.

98. jQuery Animated Postcard

image
Try this wonderful effect to animate the postcard inspired designs you have. With this effect, the clouds and the lifesaving float moves at the same time.

99. Dynamic PNG shadow position & opacity with jQuery

image
In this animation, you can drag objects and place them anywhere you want. It also features a switch that can be turned on to amaze your visitors.

100. Quicksand

image
It's a nice way of reordering and filtering things with a nice shuffling animation. With this, you can make a beautiful library to make your work organized.

101. Puffing Smoke Effect in jQuery

image
This effect can be customized so that the chimney can puff a smoke of whatever shape you want. The one above puffs Super Mario Images. This is perfect to be used in headers.

102. jAni jQuery Plugin Animation

image
jAni is a simple plugin for jQuery which allows you animate background images. The plugin is basically an alternative to the animated GIF but with several benefits. At first, it's always better to use an animated GIF as this format is supported by all browsers without any JavaScript code or additional markup, but the "dark side" of it is that an animated GIF allows only 256 colors and you cannot control animation in any way.

103. Gravitational Simulation in jQuery

image
Drop the blocks by touching the red strings with your mouse. This is what this effect can do.

104. jQuery Solar System

image
This amazing effect simulates the movement of celestial bodies.

105. Animated Landscape Header with jQuery

image
This effect has a cartoon themed landscape with elements which slide out to reveal additional content.

106. jQuery Parallax

image
This is a parallax style implementation of user interactions. When the mouse moves over the document (or a specific element) the actions can be translated to modify any CSS property of an element for example an image position, to give a parallax style effect.

107. Rezoner's jEffects

image
This effect enhances user interaction by providing decorative effects. It's all packaged into an intuitive jQuery plugin. Thus, you can sprinkle cool effects on your screen once your mouse is moved.

108. Rotating Billboard with jQuery

image
Use CSS and jQuery to create the effect of a rotating billboard with two ads. Through this you can make one set of image slices disappear while another one (the other ad) appear giving the look of rotating slices, just like in a rotating billboard system.

109. jQuery Flight Board

image
A jQuery plugin that sets a division to flip between text messages like a flight board at an airport. The flight board functionality can easily be added to a division with appropriate default settings. It then displays the messages in a cycle after two seconds. Highlights and shadows are used to enhance the 3D effect.

110. Animated Cartoon Robot with jQuery

image
You can use this effect to amuse your visitors or create this out of fun. It's an animated way of to inspire someone to look beyond the perceived constraints of web designers and developers.

111. Custom Animation Banner with jQuery

image
Creating a custom animation banner with jQuery. With this animation setup, you can have different elements in a banner that will animate in a nifty fashion.

112. JavaScript Sprite Animation Using jQuery

image
With this effect you can add amusement to your pages by having your visitors flip the pages of this animated Javascript using jQuery.

113. Flip

image
Flip is a jQuery plugin that will flip easily your elements in four directions.

Transition Effects

114. jqFancyTransitions

image
jqFancyTransitions is easy-to-usejQuery plugin for displaying your photos as slideshow with fancy transition effects. jqFancyTransitions is compatible and fully tested with Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+.

115. Jquery Fade InFade Out

image
This jQuery effect fades in and fades out anything whether it is an image, text or even a link in a nice and smooth fashion.

116. Lazy Load

image
Lazy loader is a jQuery plugin written in JavaScript. It delays loading of images in (long) web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them. Using lazy load on long web pages containing many large images makes the page load faster.

117. The Sexy Curls jQuery Plugin

image
Sexy Curls jQuery plugin is an open source solution which lets you share in the beauty of the page fold feature with ease. It uses the jQuery UI and its resizable package.

118. jQuery Booklet

image
Booklet is a jQuery tool for displaying content on the web in a flipbook layout. It is built using the jQuery library.

119. jQuery pageSlide

image
This plugin allows any developer to recreate a similar interaction on their own website using a few simple lines of Javascript. By attaching the method to an anchor tag, pageSlide wraps the original body content into a wrapper and creates an additional block for the secondary content load. The slide is animated whenever the click event is invoked.

120. Smooth Animated Menu with jQuery

image
This effect creates a beautiful menu that slides down and reveal additional content in your menu when you run a mouse over it.

121. jQuery MagicLine Navigation

image
This effect highlights a background or an underline which follows you as you move your mouse over the different links in the navigation. This happens in jQuery through its animation abilities. The "magic line" is only appended via JavaScript. Once you have added it to the list and have it styled, it figures out the left positioning and the width and animates it as you mouse over the different links.

122. HighlightFade

image
This effect highlights and then fades a text or an image with a click of the mouse. It can be made to display a highlighting box of different colors.

123. Dynamic Page / Replacing Content

image
The feature of this Dynamic page/replacing content is that it replaces the content of the page if the navigation button is clicked instead of opening another window.

124. jQuery Cycle Plugin-Effects Browser

image
The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more. It also supports, but does not require, the Metadata Plugin and the Easing Plugin.

125. jQuery Captify

image
Captify is a plugin for jQuery written by Brian Reavis to display simple, pretty image captions that appear on rollover.

126. Sponsor Flip Wall With jQuery & CSS

image
Amaze your readers by adding this nice effect which flips an object to reveal the content on its underside.

127. jSquares

image
jSquares is a jQuery plugin that pops up an image and a description in an overlay on hover.

128. Grid Accordion with jQuery

image
The Grid Accordion works with the same theory as most other accordions. Only one cell is open at a time. The big thing is that the column of the current open cell expands to a reasonable reading width.

129. jquery Professional Dropdown Menu

image
jquery Professional Dropdown Menu is a classy way to integrate a long list of items in your menu. Its multiple dropdown style saves space giving a nice user interface to your clients.

130. Superfish jQuery Menu Plugin

image
Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu.

Image Editing and Adjustment Effects

131. jCrop

image
Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.

132. jQuery Virtual Tour

image
This is an extension to the simple panorama viewer that allows you to play a little bit more with jQuery by adding interactivity to transform some panoramic views into a virtual tour.

133. jQuery Corner Demo

image
This corner plugin is pulling off its magic by adding more elements to the page. Specifically, it adds div "strips" to the item to be cornered and sets a solid background color on these strips in order to hide the actual corners of the real item. So if you step back and look at the cornered element, think of there being solid colored divs hiding the true squared off corners of the item you wish to be changed.

134. Apple-like retina effect

image
Try this wonderful effect to make the text and images clearer by seeing it up close as if they're just in the retina of your eyes.

135. Image Highlighting and Preview with jQuery

image
This effect works by highlighting and previewing images that are integrated in an article or spread over a page. This is a nice way to allow users to view a bigger version of an image that is relevant to some context. It highlights images on a delayed hover and offer a preview mode which will enlarge and center the bigger version of the image on the screen.

136. Image splitting effect

image
This beautiful image splitting effect is similar to a sliding door effect where the image slides to left or right side and reveals the text behind it, but the thing that makes this different is that the effect looks like the image is splitted into half and one goes left and the other one goes right. One thing that is very important is that there will not be 2 images but only one.

137. ImjQMosaic

image
imJQMosaic is a simple jQuery plugin that creates mosaic pattern using an image. Apart of just creating the mosaic pattern on an image, it also facilitates the user to put menus on top of the mosaic tile(s). Hence, it can be beautifully used as navigation menu. It can also serve as a substitute to the popular Flash based navigations on the home pages of a website or application which unfortunately don't work on mobile phones not supporting Flash content.

138. Photo Zoom Out Effect

image
This effect enables you to create a simple image zoom out effect with jQuery. Thus you can show some images which are zoomed in initially and when hovering over an image it gets zoomed out. This effect could be used in photography websites or image galleries.

139. jQZoom

image
Make a nice jQuery zoom like the one in the above screenshot. This effect offers different ways of zooming in and out.

140. Cloud Zoom

image
Cloud Zoom is a free jQuery image zoom plugin, a comparable alternative to products such as Magic Zoom. Compared to the popular jQZoom plugin, Cloud Zoom is smaller, has more features and more robust compatability across browsers.

141. Crop Example

image
The crop plugin takes an IMG element and crops them to the dimensions given. The result is a DIV with a background image with the height and width and an offset. The new DIV should also carry across the existing style attributes of the image.

142. AnythingZoomer

image
This jQuery plugin zooms a small area when you put your mouse over it. It's very flexible and it's easy to customize in CSS.

143. imgAreaSelect

image
imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image. It allows web developers to easily implement image cropping functionality, as well as other user interface features, such as photo notes.

144. Micro Gallery

image
This jQuery plugin transforms a set of images into a tiny gallery with several options. The Micro Image Gallery allows to switch between a grid view which shows a preview of the images as thumbnails and a single view showing one image only. The navigation bar can be hidden and sliding out when hovering over the gallery, or visible.

145. Interactive Picture

image
This interactive picture – aka an image that contains tooltips and popup boxes can be useful for showing off a particular aspect of a photo (ie items or people).

146. Rounded Images

image
You can give your pictures nice rounded corners to enhance the look of your page.

147. JQuery.iviewer

image
JQuery.iviewer is a jquery plugin used to load and view image in container with ability to zoom image and to drag it with mouse in container.

Other jQuery Effects and Resources

148. Outside the Box Navigation with jQuery

image
This effect is a nice recreation of the Mac desk, which is something that many people really like.

149. JQuery animation easing plugin example

image
This jQuery tool is designed as an aid in making nice animations.

150. Greyscale Hover Effect w/ CSS & jQuery

image
As the name suggests this produces an effect of changes the image into greyscale when you put your on it.

151. Color Picker – jQuery plugin

image
This plugin can help you select color in the same way you select color in Adobe Photoshop.

152. jQuery Touchwipe

image
jQuery Touchwipe's small 1 KB library allows you to obtain the wipe event on an iPhone, iPad or iPod Touch which can be used to scroll through an image gallery. It also works with Android touchscreens.

153. Array of jQuery Animations- Tutorialized

image
This tutorial will teach you how to make amazing jQuery animation using just a few line of code for each effect. With this you can create a progress-bar in less than 3 lines.

154. Tetris with jQuery

image
Have fun with cool Tetris on your screen with this jQuery effect.

155. Music player using jQuery

image
Create an amazing music player coded in xHTML & jQuery that made use of mouse gestures and hotkeys. You can Click & Drag with mouse to interact with interface's music player or use directional keys & spacebar instead of mouse.

156. jQuery Before/After Plugin

image
This works like a sliding door in our homes. When you drag the navigation button, you expose the background of the image.

157. jQuery CSS Clip Animation Plugin

image
This is a nice way to scale an image by clicking the FULL, HALF and GONE buttons to see the animation in action.

158. jQuery Background-Position Animation

image
This effect enhances the ability to make background-position animation. The object can shoot up and move back into position when a click is done.

159. ZURB Annotation plugin

image
Use ZURB's Javascript plugin to easily add and save annotations.

160. jQuery Zoomooz

image
Zoomooz is an easy-to-use jQuery plugin for making any web page element zoom.

161. Colourful rating system using CSS3 and jQuery

image
Rating system is a very boring part of web browsing experience. That is why a colorful rating system is there to make rating activity more appealing. Take this to improve the rating system mechanism that you have in your site.

162. Dynamic FAQ Section w/ jQuery

image
With the help of jQuery & YQL, this effect can pull the contents of a shared spreadsheet in your Google Docs account, and use the data to populate the FAQ section with questions and answers. The best aspect of this solution, is that you can change the contents of the FAQ section from within Google Docs – just edit the spreadsheet. You can even leverage the rest of Google Docs' features, such as collaborative editing. This way, a small team can support the FAQ section without the need of a dedicated CMS solution.

163. Latest Tweets Tooltip with jQuery

image
If you have a news website, it might be interesting for you to allow your users to see the latest tweets about a topic. This is what this hot jQuery plugin does. It shows the latest tweets about a certain word or phrase. Words or phrases that you want to be searched for in Twitter, are wrapped with the following span. The popup box that appears can be dragged and resized. Clicking on the cross will make it disappear. The tweets are constantly being loaded in a predefined time span. This loading stops when the user hovers over the tooltip box.

164. Crazy Dots – jQuery Plugin

image
CrazyDots is a jQuery Plugin that creates a loading spinner via CSS. Best appearance is with CSS3 capable browser, but can be made to work in older browsers, too.

165. jQuery UI Animation Effects

image
The jQuery UI Effects brings us different animation techniques that we can use to in meet the need of our design projects.

WordPress jQuery Sliders

166. UBILLBOARD WORDPRESS SLIDER

uBillboard is a 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. This has enabled us to integrate many features that you have been requesting during the first year. Make sure you see this WordPress Slider demo in action!
image
MORE INFO / DEMO– by CodeCanyon (premium plugin)

167. WORDPRESS LI JQUERY SLIDER

liJQuery Image Slider plugin for WordPress is carefully crafted slider/banner image rotator, full of features, easy to install and customize. It comes with intuitive – user friendly WordPress admin interface.
liJQuery
MORE INFO / DEMO– by CodeCanyon (premium plugin)

168. SLIDER PRO – WORDPRESS SLIDER PLUGIN

Slider PRO is one of the most powerful slider plugins for WordPress on the market (some buyers have been saying that it's actually the best). The slider offers you 100+ customizable properties, 100+ possible transition effects, 10+ skins and much more. Also, the slider's administration area is very powerful and uses the default WordPress design, which WordPress users are already familiar with. This slider plugin is carefully coded, using WordPress development best practices, to avoid conflicts with other themes and plugins that are well coded. Please take a look at the list of features at the feature page and visit the slider's demo page.
Slider PRO - WordPress Slider Plugin
MORE INFO / DEMO– by CodeCanyon (premium plugin)

169. CCSLIDER WP

CCSlider WP makes it easy to embed the CCSlider jQuery slideshow plugin in your WordPress theme. CCSlider is an unique slideshow plugin because of the fact that it supports 3d transitions! There are 10 stunning 3d transitions available, and also 10 stylish 2d transitions.
ccslider wp
MORE INFO / DEMO– by CodeCanyon (premium plugin)

170. 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! Create an unlimited number of sliders with customized settings for each one, and place them anywhere on your WordPress website with ease. You must check out this WordPress slider demos
image
MORE INFO / DEMO– by CodeCanyon (premium plugin)

171. SUGAR SLIDER – WORDPRESS SLIDER

Sugar Slider makes it as easy as it could possibly be to create gorgeous sliders for your WordPress powered site. Forget nasty custom fields and image URLs. You can even forget about manually resizing every image before you upload it. With a huge list of features, Sugar Slider is on of the most advanced and powerful WordPress slider manager.
Sugar Slider - WordPress Slider Manager
MORE INFO / DEMO– by CodeCanyon (premium plugin)

172. 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. A starting point, who?s design and execution would inspire you and supercharge your own work. See theWordPress slider demo in action.
Estro - jQuery WordPress slider
MORE INFO / DEMO– by CodeCanyon (premium plugin)

173. DDSLIDER for WORDPRESS

Manage your slides the way you want, don't depend on pages and posts. Upload Images via AJAX direct from the slide manager page. Over 11 different transitions
DDSliderWP
MORE INFO / DEMO– by CodeCanyon (premium plugin)

174. KEN BURNS WORDPRESS SLIDESHOW

With cool features and effects this WordPress slider can become the perfect way to showcase your products.
image
MORE INFO / DEMO– by CodeCanyon (premium plugin)

175. WORDPRESS SLIDER GALLERY SHORTCODE

This plugin creates a new shortcode for WordPress. With this new shortcode, you can create a slider gallery in seconds just by typing [slider] while you're writing your post or page. The slider will display the images that you have uploaded to the current post or page. If you need more options, this simple shortcode features multiple attributes that you can set

WordPress Slider gallery shortcode

MORE INFO / DEMO– by CodeCanyon (premium plugin)

176. WORDPRESS ANYTHING SLIDER / BANNER MANAGER

wordpress-anything-slider
MORE INFO / DEMO– by CodeCanyon (premium plugin)

177. WP Slideshow Gallery

With the WordPress slideshow gallery plugin you can embed a slideshow gallery into any WordPress post/page with the use of the "sideshow" shortcode. You can hardcode a slideshow gallery into any of the PHP files of your WordPress theme using just a few lines of code. This WordPress Slider plugin have thumbs below the image being presented, text overlay and looks pretty cool – and then it is completely free.
wp-slideshow-gallery
MORE INFO / DEMO – by tribulant.net (free plugin)

178. SMOOTH SLIDER

Smooth-Slider
MORE INFO / DEMO– by Tejaswini Deshpande (free plugin)

179. 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.
royalslider-touch-content-slider
MORE INFO / DEMO– by CodeCanyon (premium plugin)

180. FEATURED POSTS WORDPRESS SLIDER

Show off your content the real way – in a slider! This WordPress slider includes 6 predefined layouts and allows you to customize layouts with 18 variables. Intuitive admin GUI with inline help. Try the preview now.
Featured Posts WordPress Slider
MORE INFO / DEMO– by CodeCanyon (premium plugin)

0 comments:

Post a Comment

 
Top