Content / Image Sliders: 10 Excellent Free JavaScript Sliders

What’s a content / image slider?

Content & Image Sliders (or Carousels) are components used to cycling through elements in a professional way having stunning visual effects and various templates to be appealing to the visitors.

Are you interested in implementing a content / image slider in your website? Checkout this list!

Create Featured Content Slider Using jQuery UI by Web Developer Plus – This is a nice tutorial that teaches you how to “show off the best content of your website or blog in a nice intuitive way” in order to “catch more eyeballs”. One of the techniques to show the featured content is the auto-playing content slider.

featured-content-slider-using-jquery-ui

Easy Slider is a JQuery Plugin that “enables images or any content to slide horizontally or vertically on click”.

Features include:

  • Auto Slide
  • Continuous Sliding
  • ‘Go to first’ and ‘Go to last’ buttons
  • Vertical Sliding
  • Hiding Controls
  • Optional wrapping markup for control buttons
  • Multiple Sliders on one page

This slider script is simple to implement, lightweight and easy CSS customizable.

easy-slider-jquery-plugin

a-slick-auto-playing-featured-content-slider Creating a Slick Auto-Playing Featured Content Slider is a tutorial written by Chris Coyier from CSS-Tricks.com. This script is based on the Coda Slider. It has additional features such as:

  • Different types of custom content in the panels.
  • Auto-play.
  • Arrow Indicator.

Start/Stop Slider – a tutorial by Chris Coyier from Css-Tricks.com.

start-stop-slider

Step By Step To Create Content Slider using jFlow, A Minimalist jQuery Plugin – a tutorial from WebDesignBooth that explains you how to create a simple content slider using the powerful library JQuery.

a-content-slider-using-jflow-a-minimalist-jquery-plugin

Build a Content Slider with jQuery – a tutorial by Jason Lengstorf from Ennui Design

content-slider

BarackSlideshow is a very tiny and lightweight slideslow script, inspired by the slideshow in Barack Obama website. The script takes the power of MorphList to enhance visualization and navigation through the image slider.

BarackSlideshow

Making a Content Slider with jQuery UI – a very well explained step by step tutorial by Dan Wellman for NetTuts.

Making-a-Content-Slider-with-jQuery-UI

JC Play List is free and easy to use Flash component created especially for easy visual representation of multimedia lists such as XMLs, RSS 2.0 feeds from Picasa and Flickr. This application can be used to display any kinds of lists including items that contain images, titles, descriptions, index numbers, custom backgrounds and overlays, additional information etc.

Features include:

  • Easy to customize
  • Display items in vertical and horizontal position
  • Can be used directly without coding with different components such as JC Player or Loader Pro V3
  • Multiple skins (Horizontal Skin, Minimal Skin, Thumbnail Slider Skin, Mini Skin)

jc-play-list

JC Play List is a fla-based component and includes all the assets it needs, including the UIScrollBar component. For this reason it is an easy to customize component. All you have to do is access the skin assets that are added to the Library when you place the component on the stage or by simply doubleclicking on the JC Play List instance to access the skin embedded into it.

AnythingSlider jQuery Plugin is an attempt at bringing together the functionality of all of those previous sliders and adding new features. This is the first JQuery Content Slider Plugin released by CSS-Tricks.

Features include:

  • 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

anything-slider

This new 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.

Comment via Facebook

comments

19 Comments

Trackbacks

Leave a Reply

Your email address will not be published. Required fields are marked *