That sliding navigation is a feature built-in to the theme used by the Thinking for a Living website. If you view the source code, you can see that each panel in the slider is defined by similar code starting with:
<div id="covers" scope="Covers">
<div class="cover-index grid4 column page">
<div class="cover grid3 cover-quote">
...
A quick look further through the code finds the page defining a couple of specific JavaScript files for the site (custom-built for the site means it’s not a publicly available plug-in):
<!-- ORG.TFAL.JS -->
<script type="text/javascript" src="http://www.thinkingforaliving.org/wp-content/themes/TFAL/lib/js/org.tfal.plugins.js?0.1.0.9"></script>
<script type="text/javascript" src="http://www.thinkingforaliving.org/wp-content/themes/TFAL/lib/js/org.tfal.js?0.1.0.7"></script>
Digging deeper shows that the site is selecting the items inside scope="Covers"
and loading them for use elsewhere:
/* ---------------------------------- */
/* COVERS */
$('div[scope=Covers]').TFALCovers();
$('.cover-quote').TFALCoverQuote();
/* ---------------------------------- */
The other JavaScript file defines both TFALCovers()
and TFALCoverQuote()
as jQuery extensions that control the look, layout, and behavior of the home page.
So to answer your question, the navigation of this page was built with some cleverly-constructed, custom jQuery extensions. You can poke around in the code yourself and try to simulate the behavior on your own site, or you can use one of any freely available jQuery slideshow/sliding navigation plug-ins: