190+ Best jQuery Slider Plugins & Tutorials with Demo – Part IV
AccuWeb's Free Web Hosting

190+ Best jQuery Slider Plugins & Tutorials with Demo – Part IV

Guys, here is the Fourth & last part of 190+ Best jQuery Slider Plugins & Tools and thank you for your comments and emails on our 190+ Best jQuery Slider Plugins & Tools – Part III.

You may also like the following jQuery Sliders articles:

SlinkySlider

The Slinky Slider loads a user-defined number of HTML files into “panels.” The panels are stacked up horizontally inside a nominated container. Once the panels have been loaded, all bar one are collapsed to a clipped small size.

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 panel content can be full HTML, flash or other media, or just plain image references. This plugin was released under the GNU General Public License.

Carousel WordPress Plugin

207

This plugin’s main goal is to be applied in WordPress script, it’s an open-source under the MIT license.

Please use the comments to make suggestions for updated versions, or contact the author.

MopSlider

209

This is essentially a slider box that can fit anything. On version number 2.5, more than one can be placed on one page. Added features Otomubu. Tested and works with Safari4, Firefox3, Opera9, IE6, IE7, IE8, Google Chrome.

Horizontal Acordion

11-horizontal-accordion

This is quite a jQuery plugin, it has no dependencies, it offers you the optional use of easing plugin, a close and open content one after the other, and at the same time.

You can choose a trigger, and it’s easier to control through external calls. It open content on load and open content through hashtags in the URL position of the handle (left, right).

jQuery Feature Carousel

217

This plugin was intended to display feature stories on a website’s home page but can be used for any reason and is highly customizable.

It will always display three images at the same time, with all the rest hidden behind the center image.

The developer has detailed instructions for using the plugin and a list of all the options, and some frequent questions. Works in Chrome, Firefox, Safari, and IE7+. Limited support for IE6.

jQuery Liquid Carousel plugin

218

Liquid carousel is a jQuery plugin intended for liquid designs. Every time the carousel container gets resized, the number of items in the list change to fit the new width. It’s quite dynamic and gives an attractive look.

Modern Carousel

219

This carousel widget for jQuery uses modern CSS to keep panels within the document’s normal flow. This means there are no positional calculations required in the JavaScript and no float clearing in the CSS.

iCarousel

221

One of the most common problems a web developer usually faces is continuously rotating a fragment of content.

It can be a presentation of headlines, small fragments of news or a list of thumbnails.

The nature of the thing being rotated doesn’t matter too much because all those kinds of applications always share the same idea: Rotating.

This objective can be achieved in different ways, like fading and scrolling. Well, here is iCarousel becomes useful.

It’s one step forward, trying to generalize all those types of widgets, providing a rich presentation, and making the task easy to be done.

jQuery MS Carousel

226

jQuery Carousel can be auto slide; you can play with the pause/play method. It can be started from any counter.

The slide starts from zero. You can directly move to on any counter. One page can have multiple carousels, their own object can control each carousel, is vertical and horizontal enabled, you can have a callback method, and on top of all that, it’s very lightweight.

Just 4 KB, now I think you ran out of excuses and wanna try it, right?

rCarousel

227

This is a Carousel with a unique transition effect. You just need to see the demo to love it. It was released under the MIT license, so it’s free, and you can use it freely.

Theatre

229

The author refers to it as “the only carousel you’ll ever need,” and he might be right if this is what you’re looking for.

Just see the demo, and you’ll be able to fully appreciate all the features it has and start thinking about all the cool things you’ll be able to do.

FancyBox

231

FancyBox is a tool for displaying images, HTML content, and multi-media in a Mac-style “lightbox” that floats over the web page’s overtop.

It was built using the jQuery library. Licensed under MIT and GPL licenses and can display images, HTML elements, SWF movies, Iframes, and Ajax requests, it’s fully customizable through settings and CSS.

Groups related items and add navigation. If the mouse wheel plugin is included in the page, then FancyBox will respond to mouse wheel events.

It supports fancy transitions using the easing plugin and adds a nice drop shadow under the zoomed item.

The LoF jSlider

In the list sliders, each item is HTML content that uses arrows to next or previous slider. It’s easy to customize navigation tabs dynamically (such as images of sliders, number of sliders) and items auto slide.

Auto-playing (optional feature, can start playing or stopped) indicates an item via its index to display first.

Support the wheel up and wheel down to the previous|next item in the list and preload images before play a slideshow. This is great for any kind of use.

Mead Miracle Sliding

250-mead-miracle

This plugin’s idea is to display a varying number of images in an attractive and easy to use manner—the inspiration for this plugin this iTunes album viewer.

The SlidingGallery plugin will take a group of images and turn them into a cyclical gallery of images that the user can click through.

One image will be centered on the screen, with two smaller images off to the sides. The user can click smaller images to bring them to the center or the center image to enlarge it.

Moving Boxes

251-moving-boxes

Many of the concepts presented in other tutorials are the same with this slider. The big difference here is that buttons to change panels, and the panels zoom in and out.

AD Gallery

252-AD-Gallery

This is a gallery plugin that’s a bit different than plugins like Thickbox and Lightbox. You can see it here (it’s a work in progress, please be gentle).

After quite a lot of tweaking, bug fixing, and making sure it works in popular browsers, the developer released version 1.0.0.

If you find any bugs or have any features you’d want for it, please don’t hesitate to send a comment.

Panel Gallery

253-Panel-Gallery

The PanelGallery is a free jQuery plugin, distributed under the Creative Commons Attribution 2.5 License, which means you are free to use and modify it for any purpose.

If you choose wisely your photos, it will add a special effect, like adding colors to the panels’ images, just like in the example.

Panorama Viewer

254-panorama

This small jQuery plugin displays an interactive panorama. All images on your page containing the class ‘panorama’ The advantage of this version is no longer just for SPIP CMS users, primarily based on the available library jQuery, making integration easier.

Gallery

255-Gallery

The jQuery Gallery Plugin take a grouping of images and turn it into a flash-like image/photo gallery. By only looking at the demo, you’ll see that it’s complete, it is easy to use, neat, and have elegant effects. It has all the basics in it.

LazyLoad

258-LazyLoad

Mark Tuupola created this jQuery Script. LazyLoad is a jQuery plugin written in JavaScript.

It delays the loading of images in (long) web pages. Images outside of viewport won’t be loaded before the user scrolls to them.

This is the opposite of image preloading. Using lazy load on long web pages containing many large images makes the page load faster.

The browser will be in a ready state after loading visible images. In some cases, it can also help to reduce server load.

Image Cube

250-image-cube

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. Stop and restart the automatic rotation with the appropriate commands.

You can also remove the image cube functionality with the ‘destroy’ command if it is no longer required.

Hovering Gallery

263-hovering-gallery

This tutorial will create a fantastic image gallery that leverages the latest CSS3 and jQuery techniques.

The Script will be able to scan a folder of images on your web server and build a complete drag and drop lightbox gallery around it.

It will be search-engine friendly and even be compatible with browsers that date back as far as IE6 (although some of the awesomeness is lost).

Next GEN

264-next-gen

This plugin for WordPress is a new Gallery plugin called NextGEN Gallery. It’s named “NextGeneration” to echo the development of game consoles.

Hopefully, you can see how it exploits some of jQuery and AJAX/Web 2.0 technologies’ tremendous possibilities.

Some of the existing image and gallery plugins for WordPress are really good and well designed.

Still, the gap filled with this plugin was a simple administration system that can also handle multiple galleries at the back end.

Awesome Box

265-awesome-box

Awesome Box is a straightforward and unobtrusive Javascript that loads images in the same window.

Overlaid over the page’s content and the new v2 delivers internet Explorer 6 Support, key navigation using ‘n’ for next, ‘p’ for previous, and ‘x’ for the close.

Horinaja

Horinaja is a ready-to-use slideshow implementation, utilizing either Scriptaculous/prototype or jQuery, which allows you to use a mouse wheel for navigation.

When the mouse is outside of the slideshow area, it scrolls. When hovering over the slideshow, the scrolling pauses.

Can automatically create slide indices (pagination), if required, to manually scroll, either click on the slide index links (pagination) or use your mouse wheel. D. Massiani developed this plugin.

ThickBox 3.1

ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframe content, or content served through AJAX in a hybrid modal.

Hover Intent

Hover Intent r6 (2011) has all the same functionality as r5 (2007) except that the Google Chrome defect (known defects) is fixed once you upgrade to jQuery 1.5.1. Translations Беларуская courtesy Martha Ruszkowski examples jQuery’s hover (for reference).

Space Gallery

Attach the Javascript and CSS files to your document. Edit the CSS file, fix the paths to images, and change colors to fit your site theme.

Important: be sure to include Javascript files in a specific order. Prepare a block-level element with some images inside. All you have to do is to select the elements in a jQuery way and call the plugin.

Image Gallery Powered by Picasa

This tutorial will help you to create a simple image gallery powered by Google’s Picasa Web Albums. To enhance the user’s experience, it also includes some jQuery and creates a scrollable album carousel.

This uses PHP’s SimpleXML extension to sort and access the data inside the XML feed provided by Picasa Web Albums. jQuery will be responsible for the DOM manipulation and AJAX request.

Really Cool Image Gallery

One of the main benefits of using a popular java script-library, such as jQuery, is the incredible number of available plugins to kick-start any development project.

With this, you’ll be able to build a custom gallery that scans a folder of images and outputs a slick gallery, utilizing PHP, CSS, jQuery, and the jQuery Lightbox plugin. There is no need to download the plugin because it’s included in the demo files.

Smooth Gallery

This Script provides containers of id “myGallery” that contains several “imageElement” items.

Each item is composed of four values:

  • The first value is enclosed in an h2 tag and defines the title.
  • The second one is the current element’s description and is enclosed in a paragraph tag.
  • The third is the image link (URL in the “href” part of the tag and title in the “title” part).
  • The fourth one is the full-size image file, and last, but not least, there is finally the thumbnailed image file (Only specify it if you have decided to show the carousel in your gallery. By default, thumbnails are 100px wide and 75px tall).

EnlargeIT!

EnlargeIt! is a little Javascript you may use in your HTML pages. It enlarges thumbnail images beautifully with a mouse click. You can use different animations if you like. You may add AJAX content to your files.

This incredible script is straightforward to integrate, works for pictures, flash files, FLV videos, YouTube videos, DivX videos, and iframe.

Enlarge several files simultaneously, is lightweight – the javascript file is only 11 – 22 Kbyte in size it works with any web browser of the last years, and it’s under GNU GPL 3.0 license for free software.

PixelPost Photo

Pixel Post Photo is free to download and use in accordance with the GNU license. The application can do a lot more, though.

You need to be creative and push it in the direction you have in mind. By default, it’s a fully functional photoblog.

PixelPost Photo project developers work on it in their spare time, and it’s come a long way in the last few years. If you have any questions or want to help, please join the community and start posting!

jQuery Multimedia Portfolio

The 2010 version is available.

Shine Time

This plugin will show you how to create an animated Shine Effect with jQuery & CSS3 and then use it to create your very own Shiny Gallery’ ShineTime’.

This effect is useful in making your user interface elements look like they’re a real polaroid photo (or made of glass), and the best part is, it’s not that difficult to achieve.

You’ll also learn how you can successfully use layering in your designs to give your gallery that extra bit of detail that can make it stand out from the others.

MLB Switcher

Although this is not a step-by-step tutorial, for those interested in the JavaScript/jQuery used, the author provided extensive commenting in the JavaScript file, so you can see exactly what each section of the code does.

The data is contained in a JavaScript object to keep the code clean and separate it from the main code.

This version uses CSS3′s border-radius, RGBA colors, opacity, and small use of a gradient, and still looks acceptable in non-supportive browsers (although the jQuery is not as smooth in IE6 & IE7).

jQuery Image Scroller Plugin

The idea is that you have a container (.image-scroller) with a fixed height and width, an image that is taller than the container (.feature-image), and a container (.preview) for the thumbnail of that image, some times large individual images work great for products like shoes.

When we needed to introduce clothing items, we couldn’t fit the entire product without shrinking the image down until it was too small.

The given solution was to have a small thumbnail preview that you could drag over to view different sections of a larger image.

Image Gallery in 4 lines of jQuery

This script will let you build an image gallery with thumbnails for websites. It’ll allow you to show a large image and a few thumbnails below that.

Also, a large image will have a bar with a description. When the user clicks on the thumbnail, the large image and description should change.

The idea is to use the alt tag of the thumbnail image for large image description.

Micro Image Gallery

The following jQuery plugin transforms a set of images into a tiny gallery with several options. The Micro Image Gallery allows switching 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. A total of nine thumbnails are shown in the grid preview. The plugin will automatically resize the image according to the chosen gallery size.

jQuery Image Scale Carousel

What Makes jQuery Image Scale Carousel Different? It auto-scales the images you put into it to the appropriate height and width, keeping their aspect ratio in place.

When working with imagery online, keeping an image aspect ratio’s integrity is as important as anything else.

This is what’s so nice about this jQuery plugin; you don’t have to worry about all of your images being perfectly sized for this slider.

The jQuery Image Scale Carousel auto-scales all of your images, making implementation super simple.

Zooming Image

Zooming image plugin allows you to reach different design ideas with images resizing. It preloads images; images can be grouped in galleries, scales the image to fit the viewport, and allows keyboard gallery navigation. It’s pretty simple, and with it, you can achieve great things.

Exposure

Exposure is an image viewer plugin easy to use default setup. It supports slideshow and image carousel, keyboard navigation, support for captions, additional metadata, JSON (over AJAX) as an alternative input source, is cross-browser, and a lightweight footprint. It’s a free open source.

Simple Accordion with jQuery and CSS

The developer’s name is Soh Tanaka. He knows that when designed and implemented with usability in mind, the accordion can be incredibly useful when organizing a good chunk of content.

Since many people found his toggle tutorial useful, he’s now going over how he approached building an accordion from scratch.

Please keep in mind that this tutorial requires basic knowledge of CSS and jQuery. Please be sure to learn the proper foundations before attempting to take this tutorial.

Zoom Info

Question: Have you ever wanted to neatly display a few lines of text about an image in your site but didn’t want to compromise on the design of your overall layout?

The answer is by hiding that information in your interface but keeping it accessible. In this jQuery script, you’ll learn how to create a useful information-rich jQuery Image Gallery that solves that problem.

Zoomooz.JS

Some of this plugin’s greatest feature ideas might be to make it work in older IE versions, have zoomed out a return to the same scroll position, support for 3d transformations, and hide elements that are not shown while transforming awesome kinetic scrolling.

Visual Lightbox for android

Visual LightBox JS is a free wizard program that helps you easily generate web photo galleries with a nice Lightbox-style overlay effect in a few clicks without writing a single line of code.

Just drag&drop your photos into the Visual LightBox window, press “Publish,” and your web gallery with beautiful LightBox 2 effects will instantly open in the browser!

No javascript, CSS, HTML coding, no image editing, just a click to get your gallery ready. Visual LightBox is available as a Prototype or jQuery plugin, for Windows and Mac. You can also use it to show a public Flickr set or all public Flickr user photos.

jQuery MB Gallery

Now the version 2.0.2 it’s available but, what’s new in 2.0.2? Completely rewritten code, support for Flickr sets and User photos, fully customizable via CSS, really fast display, show as an overlay or in place gallery.

Gallerific

Galleriffic is a jQuery plugin that provides a rich, post-back free experience optimized to handle high volumes of photos while conserving bandwidth.

Sadly, the author says he’s not so great at spelling, and it was much later that he realized that the more appropriate spellings would be Gallerific or Gallerrific, but it is too late now for a name change Galleriffic remains.

jPhoto Grid

Nearly all of the styling for this plugin is done in CSS. The trick is to layout the grid by floating the list items.

The first thing the plugin will then do is convert these all to absolutely positioned. This allows the plugin to zoom in on an individual image and then return it to its place.

This depends on the browser’s ability to scale images. In the stylesheet, the images are set to width: 100% and animate the container’s size.

Malihu

The simple and elegant image gallery is made by combining some previous scripts/tutorials posted on this blog. As of 23/01/2011, the gallery features next/previous image functionality via buttons and keyboard arrows. The thumbnail scrolling function has been optimized significantly. The demo and .zip files are updated.

Infinite Scrolling Web Gallery

When working your way through a web gallery, don’t you find it annoying when you must change pages? So with this tutorial, you will learn how to create an auto-generating, one-page, infinite scrolling gallery with PHP and AJAX. Full of awesomeness!

Horizontal Box Slider

Works well in Chrome 6, Firefox 3.5, Safari 5, Opera 10.60, and IE 8. IE 6 and 7 have some issues with examples, but the script itself works.

The horizontal_box_slider.js is using native scrolling. There are a lot of “carousels,” but none of them is using them.

Well, and this is how this list end, jQuery is absolutely a helpful tool for you to use and take full advantage of, don’t be afraid of trying new things with this and try to mimic any cool effect you’ve seen and liked.

I hope you enjoyed it and find something that picked your mind. Check out the demos, download your favorites, and let us know how it worked for you looking forward to your comments.

Written by
Suresh Patel
Join the discussion

1 comment
  • Fantastic website. Plenty of useful information here. I’m sending it to several pals ans additionally sharing in delicious. And of course, thank you for your sweat!

Let’s get social

Web design blog for professionals with topics focusing on useful design techniques, design best practices and design inspiration. Subscribe for updates!

15585

JOIN OUR GROWING LIST OF SUBSCRIBERS!

Following our blog is a great way to make sure that you are up to date on the latest and greatest Freebies and WordPress news.

15856