Best examples of jQuery Sliders Effects and WordPress Plugins

Nur . Posted in Inspiration, Plugins 2893 Views

jQuery are the best way to display your row images to present to your visitors. There are lots of option and customization that can create very simple, beautiful and good looking image sliders. Yesterday I written a tutorial on HOW TO: Create A Vertical Scrolling News Ticker on WordPress With jQuery Carousel. In this post you’re going to find different types of pre-made jQuery plugins and unique image galleries for inspiration, and at the end there are some WordPress themes  if you want to develop your own site image slider with beautiful effects.

jQuery Slider, Slideshow and jQuery Carousel Effects


3d Rotation Viewer

This example is inspired by a showcase example by Apple of HTML5 technologies. The UIZE implementation works in pretty much all browsers, with no need for HTML5 or CSS3 features. This was an exercise in seeing how easy it would be to create an equivalent experience in UIZE. It was easy, taking less than a day. The code is all original, with absolutely no referencing of Apple’s code (but thanks to Apple for their delicious iPod Touch products, and for their fabulous photos of said products). In the example, an instance of the Uize.Widget.Drag class is being used to create a simple 3D rotation viewer. Using a mouse, you can click and drag to rotate the 3D image. On an Apple iPad, you can use your finger.

jQuery Banner Rotator / Slideshow

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.

Live preview | Detail

HTML5 jQuery slider w/ Canvas and jQuery

A progressively enhanced slideshow with a fancy transitioning effect, which is perfectly functional in older browsers as well.

Live preview | Download

AviaSlider – jQuery Slideshow

AviaSlider is a very flexible and easy to use Image slideshow plugin for jQuery with a set of really unique transitions that were nver available before, as well as some basic transitions, so the slider will fit into every project.

Live preview | Detail

Estro – jQuery Ken Burns & swipe 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.

Live preview | Detail

Highslide JS

Highslide JS is an image, media and gallery viewer written in JavaScript. These are some of its advantages:

  • Quick and elegant looking.
  • No plugins like Flash or Java required.
  • Popup blockers are no problem. The content opens within the active browser window.
  • Single click. After opening the image or HTML popup, the user can scroll further down or leave the page without closing it.
  • Lots of configuration options and scalability without compromizing on simplicity. A component system lets you strip away unused features down to a filesize of 10kB.
  • Outstanding, unconditional and free user support for both commercial and non-commercial users.
  • Compatibility and safe degrading. If the user has disabled JavaScript or is using an old browser, the browser redirects directly to the image itself or to a given HTML page.
  • Source code included.

Detail

Sexy Slider

SexySlider 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!

Live preview | Detail

CrossSlide

CrossSlide is a jQuery 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 (that is, a lot!) Internally CrossSlide does not rely on lookup tables, building instead a “chain” of functions. Each function starts a linear phase of the animation through jQuery, setting the next function in the chain as a complete callback. After all the functions are prepared and the animation is started, no other calculations are made. This setup reduces runtime overhead to the absolute minimum, making CrossSlide the most optimized implementation of these effects.

Detail

Panning Slideshow

This slideshow uses a few amazing photos found on Flickr. You can find links to them below. This is only the example page. Head back to Build Internet for the full tutorial and explanation.

Detail

Supersized jQuery plugin

Live preview | Download

Coin Slider

Compatible with Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+

Detail

Sliding Boxes and Captions

Detail

Polaroid Photo Viewer

This example is making use of CSS3 and jQuery, just to show the effect when combining two powerful techniques. The CSS3 is injected by jQuery, keeping the CSS file clean.

Detail

Thumbnails Navigation Gallery with jQuery

In this tutorial we are going to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation. We are going to use jQuery and some CSS3 properties for the style. The main idea is to have a menu of albums where each item will reveal a horizontal bar with thumbnails when clicked. The thumbnails container will scroll automatically when the user moves the mouse to the left or right.

Live preview | Download

Step Carousel Viewer

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. And fear not in taming this script to go exactly where you want it to- two public methods, two custom event handlers, and three “status” variables are here for that purpose.

Revealing Photo Slider

Sideways – Fullscreen Gallery

Demo  |  Demo 2  | Download

Nivo Slider

Slick Auto-Playing Featured Content Slider

SlideDeck

DualSlider

 JCoverflip

Flip Box

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

ImageFlow

PieceMaker

Other jQuery Slider, Slideshow and jQuery Carousel Effects


Text with Moving Backgrounds
Magic Scroller
jQuery Animated Innerfade
Pikachoose
MopSlider
jQuery Slinky Slider
jQuery.SerialScroll
Anything Slider
Zoomer Gallery jQuery Plugin
jQuery Plugin for Zoomable, Interactive Maps
Galleria
BBC Radio 1 Zoom Tabs
Leopard Desktop with jQuery
Contextual Slideout Tips With jQuery & CSS3
Animated fullscreen background image slideshow
Gallery Using z-index and jQuery
Background Image Navigation with jQuery
Morphing Gallery
Slide Thumbs
Presentation Cycle
iTunes-like Slider
iCarousel
Minimalistic Slideshow Gallery with jQuery
Related Posts Slide Out Boxes with jQuery and CSS3
Compact News Previewer with jQuery
Annotation Overlay Effect with jQuery
BxSlider 2.0
Lof JSliderNews
Image Rotator with Preview
Cloud Carousel
jQuery popeye 2.0
Control Tabs
YoxView
BlogSlideShow
jQuery Tiny Slider
jReel Gallery
Smooth Div Scroll
s3Slider jQuery plugin
Sliding Login Panel
jQuery Slideshow using CSS Sprites
jqGalScroll
Multiple Image Cross Fade
Fancybox
jQuery Cycle Plugin
jQuery Image Scroller

Text Effects with jQuery


jQuery Word Counter

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. The extra div is displayed under the textarea, which shows the current number of input characters and words. You can set your own styles and customise the text counter information. Version 2 provides the callback function.

jTicker Typing Text Effect using jQuery

For long now flash has been dominating the interactive web animation, using JavaScript was a daunting task. But introduction of frameworks like jQuery, MooTools, Scriptaculous, etc have made animating web component much easier. Another advantage of using these frameworks over flash is that they are search engine friendly. Though search engine do not index JavaScript, actual content is present in html or other SEO friendly code.

Codename Rainbows

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

Grab bag, jQuery text effects

Some fun little text effects. These manipulate $(ele).text() so will probably be disastrously broken with inner HTML content.

Color Changing Text and Backgrounds Effects

Normally you would define the (background) color in the CSS and that would be the end of it. In this case we want to be able to adjust colors after the page has loaded, and not just once either – we’re aiming for continuous adjustments.

The lovely part about this whole thing is the small about of jQuery required to make it all happen.

Fade Colors Using jQuery

Retweetradar has nice little effect in the footer – links in top lists fade, emphasizing the most popular links with strongest color intensity. This tutorial will explain how to fade a color in array of elements using jQuery.

Playing with jQuery Color Plugin and Color Animation

jQuery is an easy and useful JavaScript library. If you are someone with basic knowledge of JavaScript you can easily insert jQuery plugins and effects. You do not need to be hardcore coder or developer for that. In this post you will see how to create some cool menus with jQuery and  jQuery Color Plugin.

jQuery Approach

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.

AutoCompleter

AutoCompleter Tutorial

I thought i would write this tutorial because most of the auto completer applications i have seen just dump the code into a zip and tell you how to use it rather than how and why it works, knowing about this enables you to customise it a lot more (this has been demonstrated with the other apps i have written here)!

3d Tag Sphere

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.

Simple jQuery Text Resizer

The idea is very simple: you click on the text size you want, and a class is added to the body to indicate which size the user has selected. Then, we take advantage of that body class when we are writing our CSS to size the different elements appropriately.

Airport

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.

Zooming with jQuery

This is basic level tutorial just changing style using jQuery script. It’s simple use it for zooming website content. Take a look at live demo

jQuery Label Effects

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

jQuery Flying Text With Fade Effect

With this great javascript framework, jQuery, you can create some flash like effects. In this post, I will show how to create very simple flying and fading text effect using jQuery. Here is live demo.

Animation Effects with jQuery


Dynamic PNG shadow position & opacity with jQuery

You can drag objects and place them anywhere you want. As well, there is a switch that can be turned on to amaze your visitors.

Image Cube

jQuery plugin that sets a division to rotate between images (or other things) as if they were on the faces of a cube.

jQuery.Smart3D

Interesting effects, which can be used on site-header. It’s very simple to use: several layers glued together into a 3D effect. See examples of using this jQuery plugin!

3D Sphere

This tutorial will walk you through how to create a Sphere in jQuery.

 3D Tag Cloud

This tutorial will show how to create a scrolling 3D tag cloud…it’s not as difficult as you might think.

Flip HTML content in 3D

In order to use the rotate3Di jQuery plugin, your web page will need to include jQuery v1.2.6 or newer, the jQuery CSS Transform patch, and the rotate3Di plugin itself.

Circulate

This is a very excellent plugin. after open the page, 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.

Spritely

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.

Animated Curtain

This tutorial would not be anything special without the graphics, so let’s make sure you’ve got those under control. I’ve included the ones used in demo as part of the attached files, now would be a good time to download them if you intend to use them.

 jQuery Animated Postcard

Nicely illustrated banners are…nice. But why not add a little pizazz by using animation like Flash websites do? Through Javascript web pages are becoming increasingly less static and all sorts of creative possibilities are opening up.

Quicksand

Reorder and filter items with a nice shuffling animation.

Puffing Smoke Effect in jQuery

Creating this fun jQuery effect doesn’t take too much effort. I am going to quickly go through the steps of using this effect to show you how easy it can be. As you can see on the example page, you can selected different types of smoke that will adjust the effect while keeping the code intact.

Download the source code here: http://www.gayadesign.com/scripts/smokeeffect/smokeEffect.zip.

View the examples here: http://www.gayadesign.com/scripts/smokeeffect/

jAni jQuery Plugin Animation

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. The jAni loads a long vertical image and changes its background position with the speed you setup, giving you more control of the animation.

Animated Landscape Header with jQuery

In this tutorial we’ll start with a cartoon themed header, build two different states for content and animate a transition between them using jQuery.

jQuery Parallax

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.

Rezoner’s jEffects

jEffects enhances user interaction by providing decorative effects. It’s all packaged into an intuitive jQuery plugin. Detailed documentation is included.

Rotating Billboard with jQuery

In this tutorial we will use some images, CSS and jQuery to create the effect of a rotating billboard with two ads. The idea is to make one set of image slices disappear while another one (the other ad) appear. We will decrease the width of each disappearing slice and increase the width of each appearing slice. This will give the effect of rotating slices, just like in a rotating billboard system.

jQuery Flight Board

jQuery plugin that sets a division to flip between text messages like a flight board at an airport.

Animated Cartoon Robot with jQuery

Aside from being a fun exercise, what purpose does something like this have? None that’s plainly obvious. Its about as useful as a miniature ship in a bottle. Yet it does have an underlying purpose. It could inspire someone to look beyond the perceived constraints of web designers and developers.

Custom Animation Banner with jQuery

The idea is to have different elements in a banner that will animate step-wise in a custom way. We will be using the jQuery Easing Plugin and the jQuery 2D Transform Plugin to create some nifty animations.

JavaScript Sprite Animation Using jQuery

Add amusement flip the pages with this animated Javascript using jQueryfor your site visitors.

Transition Effects with jQuery


jqFancyTransitions slideshow with strip effects
Jquery Fade InFade Out
The Sexy Curls jQuery Plugin
Lazy Load
jQuery Booklet
jQuery pageSlide
Smooth Animated Menu with jQuery
jQuery MagicLine Navigation
HighlightFade
Dynamic Page / Replacing Content
jQuery Cycle Plugin-Effects Browser
jQuery Captify
Sponsor Flip Wall With jQuery & CSS
jSquares
Grid Accordion with jQuery
jquery Professional Dropdown Menu
Superfish jQuery Menu Plugin

Image Editing and Adjustment Effects


jQZoom
Cloud Zoom
Crop Example
ImjQMosaic
Micro Gallery
imgAreaSelect
Rounded Images
AnythingZoomer
jQuery Virtual Tour
jQuery Corner Demo
Apple-like retina effect
Photo Zoom Out Effect
Interactive Picture
JQuery.iviewer
Image Highlighting and Preview with jQuery
Jcrop » the jQuery Image Cropping Plugin

Other jQuery Effects and Resources


Tetris with jQuery
jQuery Touchwipe
jQuery Zoomooz
Music player using jQuery
jQuery Before/After Plugin
ZURB Annotation plugin
Crazy Dots – jQuery Plugin
jQuery CSS Clip Animation Plugin
Dynamic FAQ Section w/ jQuery
Latest Tweets Tooltip with jQuery
Outside the Box Navigation with jQuery
JQuery animation easing plugin example
Array of jQuery Animations- Tutorialized
jQuery Background-Position Animation
Colourful rating system using CSS3 and jQuery

Premium WordPress jQuery Sliders


uBillboard – Premium Slider for WordPress

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.

Live preview | Detail

WordPress jquery slider/banner image rotator – li

liJQuery Image Slider is carefully crafted slider/banner image rotator, full of features, easy to install and customize. Whenever you need a full featured slider image rotator or you need a simple ad banner, liJQuery Image slider will do the job with ease!

Live preview | Detail

Slider PRO – WordPress Premium 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.

Live preview | Detail

CCSlider WP – 3d/2d Slideshow WordPress Plugin

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. 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. The plugin also supports HTML captions and autoplay of slides. See below for a list of features available in the plugin.

Live preview | Detail

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.

Live preview | Detail

Sugar Slider – Premium WordPress Slider Manager

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.

Live preview | Detail

DDSliderWP – 11 Transitions – Slide Manager Panel

DDSliderWP features EVERYTHING that the jQuery plugin already offered PLUS a custom admin panel, with total management of slides.

Live preview | Detail

WordPress Ken Burns Slideshow

WordPress Ken Burns Slideshow is a smooth and beautiful flash slider made just for WordPress!

Based on the best selling Xml Ken Burns Slideshow, it has a lot of cool features and effects, so this slider can become the perfect way to showcase your products.

Live preview | Detail

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.

Live preview | Detail

Premium Featured Posts Slider

  • Show off your content the real way – in a slider!
  • Feature any post, page or custom post type
  • Includes 6 predefined layouts
  • Customize layouts with 18 variables
  • Global and per-post options
  • Intuitive admin GUI with inline help
  • Thumbnails, arrows and pagination slide controls
  • Uses your theme’s CSS styles
  • Extensive user friendly documentation
  • No template editing needed if you use [fps]

Live preview | Detail

WordPress 360º Image Slider

The WP 360 º Image Slider is a highly configurable plugin that adds slider functionality to your posts or pages. You can see the DEMO HERE . Please click on the “Play in HD” button to see it in fullscreen.

Pixwall slideshow for WordPress

Pixwall is a plugin for WordPress based on a project called Diapo, a jQuery slideshow developed by me, Manuel Masia (or Pixedelic), but improved since the original version. Pixwall is used to create animated slideshows with particular effects, and you can use it also for fullscreen background slideshows.

Live preview | Detail

Sublime Slider for WordPress

WPSublimeSlider is a fantastic WordPress plugin that allows you to create and display unlimited image galleries on your site. You can create sliders using your own images or even from a Flickr photoset or Picasa web album.

Live preview | Detail

jQuery Carousel Evolution for WordPress

jQuery Carousel Evolution for WordPress is a WordPress plugin that allows you to easily create powerfull carousel slider in a few minutes. You can then integrate it into any page with a single shortcode. It includes a full back-end interface to create and customize your Carousel. It also offers a preview mode to easily try out some settings before pushing them live.

Live preview | Detail

Flip Book WordPress Plugin

Flip Book WordPress Pluginis based is on XML Flip Book / AS3 one of the three top selling items of all times on ActiveDen . It has been built from scratch. Almost everything you see on the page is easily customizable through the WordPress administration panel – easy installation, no coding skills required.

Live preview | Detail

Free WordPress jQuery Plugins


WordPress jQuery Lightbox Plugin

As the name shows, this is just WordPress’s version of the jQuery Lightbox Plugin written by balupton, working perfectly with WordPress 2.2 or up, and fully compatible with K2!

Live preview

Carousel Gallery (jQuery)

This plugin builds on the builtin WordPress gallery, and replaces any gallery inserted using the

tag with a neat jQuery powered carousel. By carousel it means you can browse through all the pictures in the gallery and they’ll slide from the right to the left and seamlessly start over at the end.

Live preview

Shadowbox JS

Shadowbox is an online media vieiwing application similar to Lightbox and Thickbox but with more functionality. Supports all types of media.

Detail

jQuery Lightbox For Native Galleries

Makes the native WordPress galleries use a lightbox script called ColorBox to display the fullsize images.

Detail

WordPress Plugin jQuery Pagebar

This plugin show instead of the next and prev links a jQuery slider as a modern pagebar. So it’s easy to navigate through many pages.

Detail

Nur

I am a Wordpress, Website Developer and Designer, creator @ WP Arena, Provide Free WordPress consultation and can help to install WordPress in a secure way to small businesses and bloggers.

Free & Professional WordPress Security Service Free & Professional WordPress Security Service

We Love WordPress. WordPress Arena is a place for WordPress Developers and Designers, providing Tips, tricks, tools and resources to build a website or blog on WordPress. We also present The WordPress Showcase for all kind of WordPress Powered Websites.


Copyright © 2014 WP Arena All Rights Reserved

Divi WordPress Theme