Jquery portfolio gallery. A selection of responsive sliders

Competently composed and visually designed, in our case, it is separate page, is an important element of the personal site or blog, of any specialist who has reached a certain level of proficiency in their professional activities.
A portfolio page is a kind of a report, or a visual summary, with the help of which you can visually demonstrate to readers and visitors of the site / blog a set of the most successful completed works, be it photographs, articles, publications, design elements, etc.
I do not have such a page, and, on my part, this is an annoying omission that needs to be corrected as soon as possible. this moment and I work.
On endless expanses global network, you can find a huge number of ready-made templates pages to organize your portfolio, and the variety of such pages is really impressive. So, those who are in scrap to delve into all the intricacies of web design and development will always be able to find a suitable option for themselves. Well, for those who are suffering knowledge in site building, I propose to analyze an example adaptive layout, a simple portfolio page, with filtering of completed work by category, done on, diluted with an attractive transition effect, with animation elements.

The layout of the page, executable javascript and some design elements, were given by the wonderful web designer and developer Kevin Liew (queness.com). When choosing the optimal solution, it was important for me that the simplicity of execution, the functionality of the jQuery plugin, correct operation in all modern browsers, and given the growing popularity of using various mobile devices for Internet surfing, the adaptability of the design of the future page. No fancy, designer bells and whistles or heavyweight plugins.

The basic layout consists of two main elements of the user interface that we have to build, these are tab navigation to filter the categories of submitted works, and the thumbnail grid itself with a pop-up caption effect on hover.
For starters, for everything to work in the end, you will need jQuery at least version 1.7.0. If you have not yet connected it, then add next line before the tag :

Run the MixItUp plugin, paste this code after the above files:

< script type= "text/javascript" >$ (function () (var filterList = (init: function () ($ ("# portfoliolist"). mixitup ((targetSelector: ".portfolio", filterSelector: ".filter", effects: ["fade"], easing : "snap", // call the hover effect onMixEnd: filterList. hoverEffect ()));), hoverEffect: function () ($ ("# portfoliolist .portfolio"). hover (function () ($ (this). find (". label"). stop (). animate ((bottom: 0), 200, "easeOutQuad"); $ (this). find ("img"). stop (). animate ((top: - 30 ), 500, "easeOutQuad");), function () ($ (this). Find (". Label"). Stop (). Animate ((bottom: - 40), 200, "easeInQuad"); $ ( this). find ("img"). stop (). animate ((top: 0), 300, "easeOutQuad");));)); filterList. init ();));

Separately consider all the plugin options, it makes no sense, the default is pretty the best option... Well, if you really insert someone into experimenting with the parameters, please, everything is in your power.

To form the page layout and the appearance of the elements, connect a couple of files to the document . , one for the base styles, let's call it layout.css and another small CSS file normalize.css to ensure better consistency between browsers in the standard styling of elements:

< link rel= "stylesheet" href= "css/normalize.css" > < link rel= "stylesheet" href= "css/layout.css" >

Now let's sort everything out in order, if possible without unnecessary water, in an accessible and understandable way, in our native, long-suffering language.

< ul id= "filters" class = "clearfix" > < li>< span class = "filter active" data- filter= "app card icon logo web" >Everything < li>< span class = "filter" data- filter= "app" >Applications < li>< span class = "filter" data- filter= "card" >Business cards < li>< span class = "filter" data- filter= "icon" >Icons < li>< span class = "filter" data- filter= "logo" >Logo < li>< span class = "filter" data- filter= "web" >Web design

• Everything
• Applications
• Business cards
• Icons
• Logo
• Web design

On the navigation bar, place the entire list of works, divided into categories. We need to associate each portfolio category through the data-cat attribute with one or another item in the navigation bar in accordance with the value in the data-filter attribute. By matching the values ​​of data-filter to data-cat, the portfolio items will be filtered by category.
In addition, we will add to the thumbnail, hidden for the time being, a small panel with the name of the work and the title of the category, which pops up only when you hover over the picture. And to make it easier to form appearance all this construction in CSS, we will write the corresponding classes to the elements:

< div id= "portfoliolist" > < div class = "portfolio logo" data- cat= "logo" > < div class = "portfolio-wrapper" > < img src= "img/portfolios/logo/5.jpg" alt= "" /> < div class = "label" > < div class = "label-text" > < a class = "text-title" >Hosting by Beget. Ru < span class = "text-category" >Logo < div class = "label-bg" > .........

Please note that you can add links to the picture or directly to the signature so that the user can fully contemplate all your works.

CSS

Now, quietly, let's move on to the most interesting thing, to the formation in CSS of the general styles of the user interface of our portfolio page and its responsive version. In the article I will indicate only the basic (default) values, that is, without any background images and connected fonts, all this, who needs it, can be seen in the demo, or found in the archive with the sources.

.container (position: relative; width: 960px; margin: 0 auto; / * You will be able to see the chain of transitions when the browser window is resized * /-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; ) #filters (margin: 1%; padding: 0; list-style: none;) #filters li (float: left;) #filters li span (display: block; padding: 5px 20px; text-decoration: none; color : # 666; / * add some shadow for the text * / text-shadow: 1px 1px #FFFFFF; cursor: pointer; ) / * change the background of the category on hover * /#filters li span: hover (background: # 34B7CD; text-shadow: 0 0 2px # 004B7D; color: #fff;) / * background of active category item * /#filters li span.active (background: rgb (62, 151, 221); text-shadow: 0 0 2px # 004B7D; color: #fff;) #portfoliolist .portfolio (-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; width: 23%; margin: 1%; display: none; float: left; overflow: hidden;) .portfolio-wrapper ( overflow: hidden; position: relative! important; background: # 666; cursor: pointer;) .portfolio img (max-width: 100%; position: relative;) / * signatures are hidden by default * /.portfolio .label (position: absolute; width: 100%; height: 40px; bottom: -40px;) .portfolio .label-bg (background: rgb (62, 151, 221); width: 100%; height: 100 %; position: absolute; top: 0; left: 0;) .portfolio .label-text (color: #fff; position: relative; z-index: 500; padding: 5px 8px;) .portfolio .text-category ( display: block; font-size: 9px;)

Container (position: relative; width: 960px; margin: 0 auto; / * You will be able to see the chain of transitions when the browser window is resized * / -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o- transition: all 1s ease; transition: all 1s ease;) #filters (margin: 1%; padding: 0; list-style: none;) #filters li (float: left;) #filters li span (display: block; padding: 5px 20px; text-decoration: none; color: # 666; / * add some shadow for the text * / text-shadow: 1px 1px #FFFFFF; cursor: pointer;) / * change the background of the category on hover * / #filters li span: hover (background: # 34B7CD; text-shadow: 0 0 2px # 004B7D; color: #fff;) / * background of the active category item * / #filters li span.active (background: rgb (62, 151, 221 ); text-shadow: 0 0 2px # 004B7D; color: #fff;) #portfoliolist .portfolio (-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box- sizing: border-box; width: 23%; margin: 1%; display: none; float: left; overflow: hidden;) .po rtfolio-wrapper (overflow: hidden; position: relative! important; background: # 666; cursor: pointer; ) .portfolio img (max-width: 100%; position: relative;) / * captions are hidden by default * / .portfolio .label (position: absolute; width: 100%; height: 40px; bottom: -40px;). portfolio .label-bg (background: rgb (62, 151, 221); width: 100%; height: 100%; position: absolute; top: 0; left: 0;) .portfolio .label-text (color: # fff; position: relative; z-index: 500; padding: 5px 8px;) .portfolio .text-category (display: block; font-size: 9px;)

In the second part, right in the same stylesheet, using a few media queries, we will create the alternate CSS sections. To make the layout of our page appear correctly on the screens of various mobile devices, let's add alternative CSS rules for different screens in these sections. Thus, we can easily override any rules set earlier in our CSS table for ordinary browsers and achieve the very desired adaptability.

/ * Tablet * / @media only screen and (min-width: 768px) and (max-width: 959px) (.container (width: 768px;)) / * Mobile - Note: Design for 320px width * /@media only screen and (max-width: 767px) (.container (width: 95%;) #portfoliolist .portfolio (width: 48%; margin: 1%;)) / * Mobile - Note: Design for 480px width * /@media only screen and (min-width: 480px) and (max-width: 767px) (.container (width: 70%;))

/ * Tablet * / @media only screen and (min-width: 768px) and (max-width: 959px) (.container (width: 768px;)) / * Mobile - Note: Design for 320px width * / @media only screen and (max-width: 767px) (.container (width: 95%;) #portfoliolist .portfolio (width: 48%; margin: 1%;)) / * Mobile - Note: Design for 480px width * / @media only screen and (min-width: 480px) and (max-width: 767px) (.container (width: 70%;))

That's all. Our wonderful page under the capacious title "Portfolio" is ready, it remains only to fill it with our no less wonderful and outstanding works, and put it on display to the whole world. You can still be proud of yourself in a quiet, modest way. The main thing is not to overdo it in this matter.
Look again at the example and, if necessary, take the source code, at your leisure, in a quiet home environment, you will be able to perfect this work.

When creating the lesson, the following material was used:. The original, pristine clean, fresh from the pen of the author, portfolio page, is in the same place.

Good luck to everyone and with benefits for the body, to spend the rest of the short summer!

Currently, a slider - a carousel - functionality that you just need to have on a website for a business, a website - a portfolio or any other resource. Along with full screen image sliders, horizontal carousel sliders fit well into any web design.

Sometimes the slider should take up one third of the site page. Here the carousel slider is used with transition effects and responsive layouts. Websites ecommerce use a carousel slider to display multiple photos in separate posts or pages. The slider code can be freely used and changed according to your needs.

By using jQuery in conjunction with HTML5 and CSS3, you can make your pages more interesting by providing them with unique effects and draw the attention of visitors to a specific area of ​​the site.

Slick - modern slider plugin - carousel

Slick is a freeware jquery plugin whose developers claim that their solution will satisfy all your slider requirements. The responsive carousel slider can work in tile mode for mobile devices, and in drag-and-drop mode for the desktop version.

Contains a transition effect "fade", an interesting feature "mode in the center", lazy loading of images with auto-scrolling. The updated functionality includes adding slides and a slide filter. Everything so that you can customize the plugin according to your requirements.

Demo Mode | Download

Owl Carousel 2.0 - jQuery - touch-friendly plugin

In the arsenal of this plugin - large set features suitable for both novice and experienced developers. This is an updated version of the carousel slider. Its predecessor was named exactly the same.

The slider contains some built-in plugins to improve the overall functionality. Animation, video playback, slider autoplay, lazy loading, automatic height adjustment are the main features of Owl Carousel 2.0.

Support capabilities drag and drop is included for easier use of the plugin on mobile devices.
The plugin is perfect for displaying large images even on small screens of mobile devices.

Examples | Download

jQuery Silver Track Plugin

Quite small, but rich in functionality jquery plugin that allows you to place a slider on the page - a carousel that has a small core and does not consume a lot of site resources. The plugin can be used to display vertical and horizontal sliders, animations and create sets of images from the gallery.

Examples | Download

AnoSlide - Ultra compact responsive jQuery slider

Ultra compact jQuery slider- carousel, the functionality of which is much more than that of a regular slider. It includes single image preview, multi-image carousel display, and title-based slider.

Examples | Download

Owl Carousel - Jquery Slider - Carousel

Owl carousel - slider with support touch screens and drag and drop technologies, easily embeddable into HTML - code. The plugin is one of the best sliders that allows you to create beautiful carousels without any specially prepared markup.

Examples | Download

3D gallery - carousel

Uses 3D transitions based on CSS styles and some Javascript code.

Examples | Download

3D carousel using TweenMax.js and jQuery

Great 3D carousel. It looks like this is still a beta version, because I discovered a couple of problems with it right now. If you are interested in testing and creating your own sliders this carousel will be of great help.

Examples | Download

Carousel using bootstrap

Responsive carousel slider using bootstrap technology just right for your new website.

Examples | Download

Based on Bootstrap - Moving Box carousel slider framework

Most requested on portfolio and business sites. This type of carousel slider is often found on any type of site.

Examples | Download

Tiny Circleslider

This tiny slider is ready to work on devices with any screen resolution. The slider can work in both circular and carousel modes. Tiny circle is presented as an alternative to other similar type of sliders. There is built-in support operating systems IOS and Android.

The slider looks pretty interesting in circular mode. The drag and drop support and the automatic slide scrolling system are excellently implemented.

Examples | Download

Thumbelina Content Slider

Powerful, responsive, carousel slider is perfect for a modern website. Works correctly on any device. Has horizontal and vertical modes. Its size is minimized to just 1 KB. The ultra compact plugin also has excellent smooth transitions.

Examples | Download

Wow - slider - carousel

Contains over 50 effects that can help you create an original slider for your website.

Examples | Download

Responsive jQuery content slider bxSlider

Resize your browser window to see how the slider adapts. Bxslider comes with over 50 customization options and showcases its features with various transition effects.

Examples | Download

jCarousel

jCarousel is a jQuery plugin that will help you organize your image preview. You can easily create custom carousel images from the framework shown in the example. The slider is responsive and optimized to work on mobile platforms.

Examples | Download

Scrollbox - jQuery plugin

Scrollbox is a compact plugin for creating a slider - carousel or text scrolling line. Key features include vertical and horizontal scrolling with pause on mouse over.

Examples | Download

dbpasCarousel

Simple slider - carousel. If you want a fast plugin, this one is 100% good. Comes only with the basic functions required for the slider to work.

Examples | Download

Flexisel: Responsive JQuery Slider Plugin - Carousel

The creators of Flexisel took inspiration from the old school jCarousel plugin, making a copy of it focused on the correct operation of the slider on mobile and tablet devices.

The responsive layout of Flexisel, when working on mobile devices, differs from the layout oriented to the size of the browser window. Flexisel is perfectly adapted to work on screens, both low and high resolution.

Examples | Download

Elastislide - responsive slider - carousel

Elastislide adapts perfectly to the screen size of the device. You can set the minimum number of images to display at a specific resolution. Works well as an image gallery carousel slider, using a fixed wrapper in conjunction with a vertical scrolling effect.

Example | Download

FlexSlider 2

Freely redistributable slider from Woothemes. It is considered one of the best responsive sliders... The plugin contains several templates and will be useful for both novice users and experts.

Example | Download

Amazing carousel

Amazing Carousel is a responsive jQuery image slider. Supports many site management systems such as WordPress, Drupal and Joomla. Also supports Android and IOS and desktop versions of operating systems without any compatibility issue. The built-in amazing carousel templates allow you to use the slider in vertical, horizontal and circular modes.

Examples | Download

For a long time I chose a topic for today's topic. As a result, I noticed that we have not yet made selections with image galleries... In my great theme, because galleries are present on many sites. To be honest, they are all not very attractive. Considering the current development trends jquery, html5 and so on. I thought that the solutions should already be much more attractive than those that I have encountered before. So. After spending a day, I managed to find huge number scripts. From this whole mountain, I decided to select only, because I love, as you have already noticed from previous posts.
Image gallery applicable not only in the case with photo albums... The script can be used, I think it will even be more correct, as portfolio for photographers, designers etc. Jquery effects will help grab the attention of visitors and simply add elegance to your website.
So. For your attention collection jquery image gallery plugins for website.
Do not forget to comment and remember, so as not to lose this collection, you can add it to your favorites by clicking on the star at the bottom of the article.

PHOTOBOX

Free, lightweight, responsive image gallery, in which all the effects, transitions are made using css3. Ideal for creating a photography website.

S Gallery

Attractive Jquery image gallery plugin... The animation works with css3.

DIAMONDS.JS

Original plugin for creating an image gallery... Miniatures are shaped like diamond, which is very popular at the moment. This form is made using css3. The only drawback of this gallery is the absence of a lightbox, which would open a photo in full size. That is, you need to screw the lightbox plugin with crabs. This script generates a responsive diamond-shaped grid of images.

Superbox

Modern image gallery using Jquery, css3 and html5... We are all used to the fact that when you click on the preview, the full image opens in a lightbox (pop-up window). The developers of this plugin decided that the lightbox has already outlived its usefulness. The images in this gallery open below the preview. Check out the demo and see that this solution looks a lot more modern.
|

Smooth Diagonal Fade Gallery

A modern image gallery in which previews are distributed over the entire screen space... The script can scan a folder with a photo on the server, that is, you do not need to insert each image separately. It is enough to upload pictures to a folder on the server and specify the path to the directory in the settings. Then the script will do everything by itself.

Gamma gallery

A stylish, lightweight, responsive image gallery with a Pinterest-style grid that has become very popular these days. The script works fine for both stationary computers and on mobile devices with any screen resolution. An excellent solution for creating a web designer portfolio.

THUMBNAIL GRID WITH EXPANDING PREVIEW

The plugin is responsive image grid... When you click below, a larger photo and a description are displayed. Good for creating a portfolio.

jGallery

jGallery is full screen, responsive image gallery... Effects, transitions and even style are easily customizable.

Glisse.js

Simple yet very effective image gallery plugin. This is exactly the solution when you need to create a photo album. The plugin supports albums and has a very cool flipping effect.

Mosaic Flow

Simple, responsive gallery of images with a grid in the style of Pinterest.

Galereya

Another stylish gallery with a Pinterest-style grid filtered by category. Works in browsers: Chrome, Safari, Firefox, Opera, IE7 +, Android browser, Chrome mobile, Firefox mobile.

least.js

Excellent free image gallery With using JQUERY, 5 and CSS3. It has a very attractive appearance and will surely grab the attention of your visitors.

flipLightBox

A simple gallery of images. When you click on the preview, the full image opens in the lightbox.

blueimp gallery

Flexible gallery. Able to display in a modal window not only images, but also video... Works great on touch devices. It is easy to customize and it is possible to expand the functionality with additional plugins (See next plugin).

Image galleries and sliders are some of the most popular jQuery formats. Thanks to them, you can add the necessary amount of visual content to the site, while saving valuable space.

Galleries and sliders make the page less busy, but still allow you to add all the images needed to convey the message. They will be especially useful for online stores.

In today's article, we have collected for you best galleries images and jQuery sliders.

To install them, just add the selected plugins to the head section HTML pages together with the jQuery library and configure them according to the documentation (just a couple of lines of code).

Choose which of these elements will fit perfectly into your project.

1. Bootstrap Slider

Bootstrap Slider is a free, mobile-optimized image slider with touch and swipe scrolling. It will look amazing on any screen and in any browser. You can load images, videos, text, thumbnails and buttons into sliders.

2. Product Preview Slider

The Product Preview Slider embodies the full potential of jQuery and integrates perfectly into any interface. You will also be pleased with the quality and cleanliness of the code of this plugin.

3. Expandable Image Gallery

Expandable Image Gallery is an awesome plugin that turns into a full screen gallery with just one click. It can be used for the About Us section or to view product information.

4. Fotorama

Fotorama is a jQuery responsive gallery plugin that works for both desktop and mobile browsers... It offers many navigation options: thumbnails, scrolling, forward and back buttons, automatic slideshows, and markers.

5. Immersive Slider

Immersive Slider lets you create a unique slideshow experience similar to the Google TV slider. You can change the background image to be blurred to maintain focus in the main photo.

6. Leastjs

Leastjs is a responsive jQuery plugin to help you create an awesome gallery. When you hover over the image, text appears, when pressed, the window expands to full screen.

7. Sliding Panels Template

This plugin is perfect for a portfolio. It will create blocks of images, arranged horizontally (vertically on small screens), to which the selected content will be anchored.

8. Squeezebox Portfolio Template

Squeezebox Portfolio Template offers motion effects for portfolios. When you hover over the main image (or block), anchored elements appear.

9. Shuffle Images

Shuffle Images is an awesome responsive plugin that allows you to create a gallery with images that change on hover.

10. Free jQuery Lightbox Plugin

Free jQuery Lightbox Plugin helps you to show one or more images on one page. They can also be enlarged and returned to their original size.

11. PgwSlider - Responsive slider for jQuery

PgwSlider is a minimalistic image slider. The jQuery code is lightweight, so the loading speed of this plugin will pleasantly surprise you.

12. Scattered Polaroids Gallery

Scattered Polaroids Gallery is a stunning flat design slider. Its elements move erratically when switching images, which looks amazing.

13. Bouncy Content Filter

Bouncy Content Filter is the perfect solution for and portfolio. This plugin allows users to quickly jump from one category to another.

14. Simple jQuery Slider

Simple jQuery Slider lives up to its name. This plugin combines JavaScript, HTML5 and CSS3 elements. In the demo, by default, only text loading is available, but if you make a few changes, you can add visual content as well.

15. Glide JS

Glide JS is a simple, fast and responsive jQuery slider. It's easy to set up and doesn't take up much space.

16. Fullscreen drag-slider with parallax

This awesome jQuery slider with the ability to load images and text will work for any website. It will delight users with a light parallax effect and slow text appearance.

by Digital Telepathy
An amazing content slider: SlideDeck - A Better Way To Provide Content On The Web with the goal is to make it easier for users to digest and understand the content of a website.

slideViewer (a jQuery image slider built on a single unordered list) 1.2

by Gian Carlo Mingati
SlideViewer is a lightweight (3.5Kb) jQuery plugin wich allows to instantly create an image gallery by writing just few lines of HTML such as an unordered list of images

jqFancyTransitions - slideshow with strip effects

by Ivan Lazarevic
jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects.

AviaSlider - jQuery Slideshow

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

by Dev7studios
The world’s most awesome jQuery & WordPress Image Slider, with features:

• 16 unique transition effects
• Simple clean & valid markup
• Loads of settings to tweak
• Built in directional and control navigation
• Packed version only weights 12kb
• Supports linking images
• Keyboard Navigation
• HTML Captions
• 3 Slick Themes
• Free to use and abuse under the MIT license

by DaleDavies
Possibly the easiest to use jQuery plugin for making slideshows! jQuery Easy Slides also has the advantage of being fairly light weight, with both Javascript and CSS weighing in at just under 2.1kb.

Advanced Slider - jQuery XML slider

by D.Massiani
Horinaja is a ready-to-use slide-show implementation, utilizing either scriptaculous / prototype or jQuery. Horinaja is innovative because it allows you to use a mousewheel for navigation.

by OVIDIU CHERECHEȘ
Dragdealer is a drag-based JavaScript component that embraces endless front-end solutions. Elegantly crafted for JavaScript-aware coders.

by Thomas Kahn
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. Unobtrusive and smooth is the key here.

by Sam Dunn
Supersized is a fullscreen background slideshow built using the jQuery library.

by Jeremy Fry
A simple jquery plugin to slideshow your image gallery.

UnoSlider - Responsive Touch Enabled Slider

by bxCreative
bxSlider is a content jQuery slider with features:

• Horizontal, vertical, and fade transitions
• Display and move multiple slides at once (carousel)
• Prev / next, pager, auto controls
• Easing transitions
• Random start
• Ticker mode
• Before, after, first, last, next, prev callback functions
• Optional styling included
• Tons of options

by Gian Carlo Mingati
slideViewerPro is a fully customizable jQuery image gallery engine wich allows to create outstanding sliding image galleries for your projects and / or interactive galleries within blog posts.

by Nathan Searles
Slides is a slideshow plugin for jQuery that is built with simplicity in mind. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.

by Dynamic Drive
Want to display images as an automatic slideshow that can also be explicitly played or paused by the user? Simple Controls Gallery rotates and displays an image by fading it into view over the previous one, with navigation controls that pop up when the mouse rolls over the Gallery.

by Boban Karišik
The s3Slider jQuery plugin is made by example of jd`s smooth slide show script.

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

by Mary Lou
Elastislide is a responsive jQuery carousel that will adapt its size and its behavior in order to work on any screen size. Inserting the carousels structure into a container with a fluid width will also make the carousel fluid.

by ZURB
Sick of confusing and bloated image sliders that never work? Rock ZURB's Orbit for a mere 4KB.

LayerSlider - The Parallax Effect Slider

by Scott
An amazing jQuery UI Slider, this plugin uses progressive enhancement to replace an already-functional HTML select element with a jQuery UI slider control, and adds a number of features for both visual users and those on assistive technologies.

by Tyler Smith
An awesome, fully responsive jQuery slider plugin. With features:

• Simple, semantic markup
• Supported in all major browsers
• Horizontal / vertical slide and fade animations
• Multiple slider support, Callback API, and more
• Hardware accelerated touch swipe support
• Custom navigation options
• Use any html elements in the slides
• Built for beginners and pros, alike
• Free to use under the MIT license

by d. drew design
A super simple jQuery Slideshow plugin, with features - EASY - SMALL - FLEXIBLE - NEAT

Sliding Image Gallery jQuery Plugin

by Justin Mead
The idea behind this plug-in is to display a varying number of images in an attractive and easy to use manner.

Translucent - jQuery Banner Rotator / Slideshow

by Mark Tyrrell
A jQuery image slider plugin which has been written specifically to work with fluid / responsive web layouts.

Coin Slider

by Ivan Lazarevic
A jQuery image slider with unique effects, and the other features:

• Free to use under MIT license
• Compatible with Android and iPhone
• Unique transition effects
• Valid markup
• Flexible configuration
• Auto slide
• Navigation box
• Lightweight (8kb only)
• Linking images
• Fully customizable using CSS

by Christoph Schüßler
jQuery.popeye is an advanced image gallery script built on the JavaScript library jQuery. Use it to save space when displaying a collection of images and offer your users a nice and elegant way to show a big version of your images without leaving the page flow.

by Jack Moore
A lightweight customizable lightbox plugin for jQuery 1.3+

by aeroalquimia
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!