10 Excellent Free JavaScript Content/Image Sliders

Posted on July 6, 2009, under JavaScript 

Are you interested in implementing a content 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 of the images.

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

18 Replies to "10 Excellent Free JavaScript Content/Image Sliders"

  1. nice information..tnanx 4 it

  2. thats a nice summary of js sliders.
    i like it…great stuff

  3. Just what I was looking for, thanks!

  4. […] Bit {repository} site; has a list of 10 Free JavaScript Content Sliders for you to check […]

  5. Really nice collection! Any update available? Such, new things?

    1. Thanks! You can check the latest posts. I’ve written about 2 nice image sliders: Coin Slider and Nivo Slider.

      1. Thank you. I enjoy reading BitRepository! I hope I helped a bit for hosting.

      2. Oops, I entered my blogs address wrong. Can I use some of your posts in my blog with our native language with addressing to BitRepository?

        1. Sure, you can translate my content in your native language and publish it as long as you link back ;-) Thanks a lot for the donation!

  6. Great post thank you. Have been looking for some variations of sliders that look cool.

    Have bookmarked the site.

  7. Wow great! This is exactly what i’m looking for. Thanks.

  8. Thank you for the wonderful collection.

  9. Thanks for sharing these Sliders :)

  10. Great collection dude. I use the first content slider for my site.

  11. Post very interested. I used for my website “Content Slider” by Ennui Design and I found myself very well.

Leave a Reply


* = required fields

  (will not be published)


XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Note: If you want to post CODE Snippets, please make them postable first!
(e.g. <br /> should be converted to &lt;br /&gt;)

POSTING RULES:

  • The comment must be relevant with the topic of the post.
  • Only comments with real email addresses will get approved. So, emails like 'abc@domain.com' will not be accepted.
  • Do not post the same message in multiple articles through the site.
  • Do not post advertisements, junk mail or pyramid schemes.
  • In case you post a link to another site, please explain briefly where the link goes as a courtesy to other users.
  • Do not post comments such as: "Thank you", "Awesome", "Nice tutorial", "Merci", etc.