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.

Tags:

Related Posts

Comment via Facebook

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

  2. mbn
    September 5, 2009 at 8:43 AM
    Reply

    nice information..tnanx 4 it

  3. Deniz
    September 12, 2009 at 6:09 AM
    Reply

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

  4. Rich
    October 13, 2009 at 4:58 AM
    Reply

    Just what I was looking for, thanks!

  5. Blog Post Recycling – Benefits Of A Content Slider
    November 17, 2009 at 6:06 AM

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

  6. dioxyd
    April 8, 2010 at 12:30 AM
    Reply

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

    1. Gabriel C.
      April 8, 2010 at 8:28 AM
      Reply

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

      1. Dioxyd
        December 25, 2010 at 12:55 PM
        Reply

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

      2. Dioxyd
        December 25, 2010 at 1:00 PM
        Reply

        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. Gabriel C.
          January 3, 2011 at 5:41 AM
          Reply

          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!

  8. James Isles
    July 1, 2010 at 3:15 AM
    Reply

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

    Have bookmarked the site.

  9. Pixels Design
    July 28, 2010 at 1:08 AM
    Reply

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

  11. iTechRoom
    August 30, 2010 at 12:10 AM
    Reply

    Thank you for the wonderful collection.

  12. Vladimir
    November 7, 2010 at 12:53 PM
    Reply

    Thanks for sharing these Sliders :)

  13. gtagamer-boy
    February 19, 2011 at 3:34 AM
    Reply

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

  14. Daniele Cantoni
    June 20, 2012 at 9:08 PM
    Reply

    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.