WordPress default theme, TwentyEleven, has a built-in showcase mode that is displaying a set a slides (composed of sticky posts) at the top of a page. This mode can be activated by creating a static page and set its Template page attribute to Showcase Template.

The problem with this mode to me was the lack of an auto-advance feature that will cycle through the slides every X seconds. Luckily I found a way to automate implement this with some lines of JavaScript:

<script type="text/javascript" charset="utf-8">
  // Auto-advance the showcase slider
  // Source: http://pastebin.com/s6JEthVi
  jQuery(document).ready(function(){
    var change_every = 5; // The number of seconds that the slider will auto-advance in
    var current = 1;
    function auto_advance(){
      if(current == -1) return false;
      jQuery('.feature-slider a').eq(current % jQuery('.feature-slider a').length).trigger('click', [true]);
      current++;
    };
    setInterval(function(){auto_advance()}, change_every * 1000);
  });
</script>

All you have to do is to embed this snippet of code within your home page. It could either be in the static page you use as a showcase template or in a showcase widget. The latter is the exact same method I used earlier that year to customize CSS in WordPress without messing with the original code.

And of course this code is currently live at the front page of that very blog.

Related content