I love when software is super simple …

Faded is a super simple fading image and content viewer for jQuery by Nathan Searles. It’s Easy to setup and design to YOUR specifications.

It features:

  • auto generated pagination
  • an awesome sequential image loader
  • fancy crossfading
  • essentially no CSS required
  • a number of custom options for you to set (if you’d like)

Markup for content

<div id="faded">
    <li>Slide 1 Copy</li>
    <li>Slide 2 Copy</li>
    <li>Slide 3 Copy</li>
    <li>Slide 4 Copy</li>
  <a href="#" class="prev">prev</a>
  <a href="#" class="next">next</a>

Markup for images

<div id="faded">
    <img src="01.jpg" alt="" />
    <img src="02.jpg" alt="" />
    <img src="03.jpg" alt="" />
    <img src="04.jpg" alt="" />
  <a href="#" class="prev">prev</a>
  <a href="#" class="next">next</a>


<script type="text/javascript" charset="utf-8">


speed: 300, // sets animation speed.
crossfade: false, // crossfades content.
bigtarget: false, // click content for next.
loading: false, // for images only, checks if first image is loaded before showing it.
autoheight: false, // auto adjust height.
pagination: "pagination", // sets true and class name for pagination. set to false to disable this feature.
autopagination: true, // set to true to auto generate pagination.
nextbtn: "next", // next button class.
prevbtn: "prev", // previous button class.
loadingimg: false, // location of loading image (e.g."/img/loading.gif") if using loading.
autoplay: false, // auto play of content. set to positive number for true. also sets time interval. use 1000 for 1 second.
autorestart: false, // auto restart if auto play stopped. set to positive number for true. also sets time interval. use 1000 for 1 second.
random: false // set to true to randomize order

Check out the codes & demo

[Source on GitHub] [Demo]

Have comments? Send a tweet to @TheChangelog on Twitter.

Subscribe to The Changelog Weekly – our weekly email covering everything that hits our open source radar.