60 Excellent jQuery Image Sliders and Tutorials

13年前

jQuery Image Sliders

1. FancyMoves

slider

FancyMoves is a great slider to show off services, products, or whatever you can dream up. The main image is enlarged to attract your focus. There are three ways to navigate to the next / last item: using your keyboard arrows, using the left and right arrows on the sides of the slider, or simply clicking on the next or last item in the slider.

2. Easy Gallery

easy gallery

Easy Gallery allows you to add a simple image gallery with albums and subalbums to your  site. It uses a pretty lightbox to display the large images with a thumbnail navigation below it to allow easy navigation to other images.

3. Jflow

jflow plus23

jFlow Plus is an update to the popular ultra-light-weight jFlow slider. This new addition comes with an auto slide an pause functionality and will be continually updated with additional features. jFlow Plus is an easy to implement, customizable and light-weight jQuery slider that is a great solution for you project needs.

4. Supersized

supersized

Supersized is a fullscreen slidehow jQuery plugin. It supports image preloading with image cycling with transitioning effect.

5. Orbit

Orbit

Orbit is a killer jQuery plugin that lets you create a simple, effective and beautiful slider for images of any size, and even includes some parameters for making awesome captions and a sweet timer.

6. Anything Slider

anythingslider

AnythingSlider is a jQuery Plugin with a lot of features( Slides can be anything, Navigation tabs are built and added dynamically.

7. JQuery LightBox

lightbox

jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery’s selector.

8. Coin Slider

coinsider

A Jquery Image Slider with unique effects.

9. Nivo

nivo-jquery-slider

This is a new launched image slider what use jQuery. Is cross browser and have 9 unique transition effects, navigation controls, is simple, clean, valid markup and free.

10. Featured Content Slider

Featured Content Slider

11. Easy Slider

Easy Slider

Easy Slider is a jQuery plugin, you can set up your own options and is easy to implement.

12. Cycle

cycle

The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects.

13. Dragdealer

Dragdealer

Dragdealer is much more than a simple image slider. It offers a wide variety of features related to dragging, but is also quite powerful for creating different types if image sliders.

14. JqFancy Transitions

jqFancyTransitions

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

15. Galleria

galleria

Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded.

16. Horinaja

horinaja

Horinaja is a ready-to-use slide-show implementation, utilizing either scriptaculous/prototype or jQuery. A running example above

  • allows you to use a mousewheel for navigation.
  • automatically create slide indices (pagination), if required

17. JQueryGlobe – JQuery Plugin

jQueryGlobePlugin

This jQuery plugin enables simple and easy creation of an interactive “Featured Items” widget.

  • Slick effect, no Flash needed
  • It’s just 2K
  • Reusable on multiple containers
  • Cycles items via slideshow
  • Can be styled with custom HTML/CSS

18. Agile Carousel

Agile Carousel

Jquery plugin that allows you to easily create a custom carousel. Call Jquery UI to enable many different additional transition types and easing methods. Uses PHP to draw images from the folder you specify. Configure many different options including controls, slide timer length, easing type, transition type and more!

19. Looped Slider

loopedslider

20. Piecemaker XML Gallery

Piecemaker

Piecemaker is an open source 3D Flash image rotator gallery.

21. AviaSlider

Avia

Very feature rich and good looking image slider.

  • 8 unique transition effects
  • Lots of easy to set options to create your own effects
  • Included Image preloader
  • Autoplay that stops on user interaction
  • Valid HTML5 and CSS 3 Markup
  • Packed version only weights 8kb
  • Supports linked images
  • already prepared to work with prettyPhoto Lightbox
  • works with jQuery 1.32 and higher
  • Internet Explorer 6 and higher
  • Safari 3 and higher
  • Firefox 2 and higher
  • Opera 10 and higher
  • Google Chrome 3 and higher
  • Checks for last 3 Browsers performed on Mac & Win


22. Slide Deck

slidedeck

Slide Deck is an easy to implement with a great design.

23. Simple Slide

SimpleSlide

Simple Slide is a jQuery slideshow plugin. It’s easy to use, small and flexible.

24. Yoxview

yoxview

YoxView is a free image and video viewer for websites. It’s written in javascript using jQuery and is available as a jQuery plugin.

25. Moving Boxes jQuery slider

movingboxes

26. Simple Controls Gallery v1.3

simplecon

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.

27. Animated JavaScript Slideshow

javascript-slideshow

This dynamic JavaScript slideshow is feature packed and under 5KB. It is the long awaited update to my previous script here. A few new features include description support, link support, no naming restrictions, portrait image support, graceful degradation and active thumbnail status.

28. Space Gallery JQuery Plugin

spacegall

29. jCarousel Lite

jcarous

jCarousel Lite is a jQuery plugin that carries you on a carousel ride filled with images and HTML content. Put simply, you can navigate images and/or HTML in a carousel-style widget. It is super light weight, at about 2 KB in size, yet very flexible and customizable to fit most of our needs.

30. Start/Stop Slider

Start Stop Slider

The slider does feature a stop/start button and the animation goes a little farther than simply sliding to the left.

31. Coda Slider Effect

Coda Slider

32. jQuery Infinite Carousel

Jquery Infinite Carousel

Scrolling carousel that worked in the same way the carousel worked on the Apple Mac ads page.

33. Exposure

Exposure

Exposure is a jQuery plugin for rich and smart photo viewing that can handle very large amounts of photos.

34. jQueryRotate

Jquery Rotate

This is an final product of a Wilq32.PhotoEffect Snippet (browse blog to get more information). Actually you can use this simple and tiny script to rotate images (any angle) directly on client side (for ex. user generated content), and animate them using own functions.

35. Zoomimage

zoomimage

Present your images in a stylish way, with this plugin. The links are unobtrusively highjacked to open the images in an inpage popup with drop shadow and border. Nice and simple.

36. Image Rotator

Image Rotator

An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery. Although there are many great plugins already, this tutorial will help you understand how the image rotator works and helps you create your own from scratch.

37. jQuery Image Gallery/News Slider

JQuery Image Gallery

A really cool News Slider that uses two scrollers to create very slick effect. It uses scrollTo to scroll both description and image items and it comes with previous, next, play, stop and mouseover events.

38. Simple JQuery Image Slide Show with Semi-Transparent Caption

Simple Jquery

a simple image slide show with a semi-transparent caption with jQuery. This example is suitable to display news headlines, or a image slide show in your website frontpage.

39. Sliding Boxes and Captions

Sliding Boxes and Captions

Play around with animations of the sliding element to either show or cover up the viewing area, thus creating the sliding effect.

40. Animate Panning Slideshow with jQuery

Panning Slideshow

The makings of a classic slideshow, but use a different kind of transition to animate between slides. It may not fit every project, but diversity is always welcome in the world of web design.

41. Fancy Image Gallery

fancy Image Gallery

42. jQuery Content Slider

Content Slider

43. Slick Auto Playing Content Slider

slick auto playing

44. ImageSwitch

Image switch

The main point of this plug-in is to make an easy-to-use, simple and fast plug-in to create effect when you switch between images.

45. Highslide

Highslide

Highslide JS is an image, media and gallery viewer written in JavaScript.

  • 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.

46. Kwicks

kwicks

47.Resizable Image Grid with jQuery

Resizable Image Grid with jQuery

Image grids that smoothly scale at the simple drag of a slider are no longer confined to desktop apps like iPhoto or Picasa. Thanks to some clever CSS and the jQuery UI, fluid image grids are now surprisingly simple to implement on the web.

48. Apple Style Slideshow

Apple Style - slideshow

49. Gallerific

galleriffic

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

50. S3 Slider : JQuery Image Gallery

s3Slider

S3 Slider is a jQuery plugin with nice effects and with self image changing.

51. Ultra versatile slider

Ultra Versatile

An ultra versatile slider with horizontal scrolling and animated effects using MooTools.

52. jQuery Image Scroller

imageScroller1

Image scrollers are of course nothing new; versions of them come out all the time. Many of them however are user-initiated; meaning that in order for the currently displayed content to change, the visitor must click a button or perform some other action. This scroller will be different in that it will be completely autonomous and will begin scrolling once the page loads.

53. Create Featured Content Slider Using jQuery UI

marghoob

Showing off the best content of your website or blog in a nice intuitive way will surely catch more eyeballs. Using an auto-playing content slider is the one of techniques to show your featured content. It saves you space and makes for a better user experience, and if you add a pinch of eye candy to it, then there’s no looking back.

54. jQuery pageSlide

jquery-pageslide-screenshot

jQuery pageSlide was inspired by the UI work of Aza Raskin. In his recent posts regarding concepts for Firefox Mobile and a mouse-based Ubiquity, Aza introduced the idea of sliding (or “throwing”) content aside to reveal a secondary content pane.

55. Mootools Slider With Two Knobs

mootools_slider

Ups…it is Moo tools… Well it is pretty cool though. You can very easily change the look and feel of the range indicator ( in blue in the above example), slider knob, the slider track by modifying the slider.css as required.

56. A Bullet-Proof Content Viewer

jquery_slider_8

57. Fancy Sliding Form with jQuery

jquery_slider_10

58. Simple iTunes-like Slider

jquery_slider_7

59. jQuery Captify

jquery captify

Captify is a plugin for jQuery written by Brian Reavis (@brianreavis) to display simple, pretty image captions that appear on rollover. It has been tested on Firefox, Chrome, Safari, and the wretched Internet Explorer. Captify was inspired by ImageCaptions, another jQuery plugin for displaying captions like these.

60. CU3ER Image Slider

cu3er

Yes it is Flash…but I though it is really cool and should be considered for a web design project where a image slider is needed. It is an image slider initially conceived to create 3D transitions between slides, turned out to be a convenient and multifunction solution that can be applied in a range of website building areas, from content slider to feature slider and image & banner rotator.