20+ jQuery Image Sliders and Tutorials for Creating your Own

14年前

jQuery Image Slider Plugins

Coin Slider

Coin Slider

As with most well written jQuery plugins you can get awesome features on your web pages with only a few lines of code. Coin Slider is an excellent script for showcasing images on a web site or blog, fx. an online portfolio.

  • Unique transition effects
  • Compatible with Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+
  • Valid markup
  • Flexible configuration
  • Auto slide
  • Navigation box
  • Lightweight (8kb only)
  • Linking images
  • Free to use under MIT licence
  • Fully customizable using CSS

Supersized

Supersized

Awesome full size/screen slider.

  • Resizes images to fill browser while maintaining image dimension ratio
  • Cycles Images/backgrounds via slideshow with transitions and preloading
  • Navigation controls allow for pause/play and forward/back

Nivo Slider

image

Great and flexible jQueery slider with awesome transition effects. See for your self here. I personally thought it was flash when I first saw it! More details on features:

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

Nivo Slider has been tested in the following browsers:

  • Internet Explorer v7+
  • Firefox v3+
  • Google Chrome v4
  • Safari v4
  • Opera v10.5

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. I recommend you go to the website and try out the demos.

Presentation Cycle

Presentation Cycle

Cycle is a script that supports image presentations to easily display multiple images. This script supports a lot of effects and the cycling of html elements.

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

  • Cycle through elements
  • Adjustable animation times
  • Generates a navigation bar that also shows the progress
  • Works in modern browsers

AnythingSlider jQuery Plugin

image

AnythingSlider is an attempt at bringing together the functionality of all of those previous sliders and adding new features. In other words, to create a really “full featured” slider that could be widely useful.

  • Slides are HTML Content (can be anything)
  • Next Slide / Previous Slide Arrows
  • Navigation tabs are built and added dynamically (any number of slides)
  • Optional custom function for formatting navigation text
  • Auto-playing (optional feature, can start playing or stopped)
  • Each slide has a hashtag (can link directly to specific slides)
  • Infinite/Continuous sliding (always slides in the direction you are going, even at “last” slide)
  • Multiple sliders allowable per-page (hashtags only work on first)
  • Pauses autoPlay on hover (option)Link to specific slides from static text links

    Easy Slider 1.7 – Numeric Navigation jQuery Slider

    Easy Slider 1.7 – Numeric Navigation jQuery Slider

    Great slider plugin for content and images. It is very easy to use – only a few lines of code is needed.

    • numeric navigation (as an alternative to next/previous buttons)
    • continuous scroll instead of jumping to the first (or last) slide
    • auto slide
    • continuous sliding
    • “go to first” and “go to last” button
    • hiding controls
    • optional wrapping markup for control buttons
    • vertical sliding
    • multiple sliders on one page

    AviaSlider

    aviaslider

    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

    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

    jqFancyTransitions

    image

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

    • ‘wave’, ‘zipper’ and ‘curtain’ effect, plus options that can be used for custom effect.
    • compatible and fully tested with Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+.

    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!

    Feature List

    feature-list

    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

    Galleria

    image

    Galleria is a JavaScript image gallery written in jQuery. Images are loaded one by one from an unordered list and displays thumbnails when each image is loaded. Galleria and a few themes are free to use under the MIT license. More advanced themes, better licensing options, support, integrations for wordpress etc. will soon be available as a premium membership.

    loopedSlider

    image

    jQuery Image Slider Tutorials

    Automatic Image Slider w/ CSS & jQuery

    Automatic Image Slider w/ CSS & jQuery

    How to Create a Simple iTunes-like Slider

    How to Create a Simple iTunes-like Slider

    Animate Panning Slideshow with jQuery

    Animate Panning Slideshow with jQuery

    A Beautiful Apple-style Slideshow Gallery With CSS & jQuery

    A Beautiful Apple-style Slideshow Gallery With CSS & jQuery

    Other sliders worth considering

    cu3er

    cu3er

    Flash slider with the most awesome transition effects you can imagine!

    Piecemaker XML Gallery

    image

    Another Flash slider with cool transition effects. This is actually a tutorial and you can learn how to create it yourself!