Hi there!

jump to download! →

Build an impressive slider with simple markup and minimal fuss.

On numerous occasions I have had a need (or desire) to reproduce Panic's Coda Slider. I found a very nice tutorial on jQuery For Designers and thought it would be good idea to create a plugin for this.

To understand the code and how it works please check out the tutorial, or if you're feeling lazy and just want a quick solution then download Coda Slider

Please note: I realise that there are already a bundle of Coda Style plugins out there (I'll admit I found them after finishing this one), this was more an experiment for my own learning than anything else. I'm not intentionaly stepping on people's toes! :)

How to use and abuse this plugin

jump to download! →

Include the dependants, plugin and CSS in the document head:

<link type="text/css" rel="stylesheet" media="screen" href="codaslider.css" />

<script type="text/javascript" src="jquery.codaslider.1.0.js"></script>
<script type="text/javascript" src="jquery.scrollTo.1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.serialScroll.min.js"></script>
<script type="text/javascript" src="jquery.localscroll.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.min.js"></script>

Once the DOM has loaded you can then apply the plugin to the slider markup.

<script type="text/javascript">
<!--// Hide from old browsers
    $(function() {
        $('#slider').codaSlider();
    });
//-->
</script>

Your HTML should look something like this:

<div id="slider">
   <ul class="navigation">
      <li><a href="#panel1">Tab 1</a></li>
      <li><a href="#panel2">Tab 2</a></li>
      <li><a href="#panel3">Tab 3</a></li>
   </ul>

   <div class="scroll">
      <div class="scrollContainer">
         <!-- our individual panels -->
         <div class="panel" id="panel1">
         Panel 1 content
         </div>

         <div class="panel" id="panel2">
         Panel 2 content
         </div>

         <div class="panel" id="panel3">
         Panel 3 content
         </div>
      </div>
   </div>
</div>

Options

jump to download! →

Version 1.0 allows for a number of options to be passed to alter the behaviour of the slider:

Option Behaviour Defalt
duration The speed of the scrolling animation. Can be specified in miliseconds or as 'slow' or 'fast' 500
easing This plugin can be used with the easing plugin from GSGD. Specify the name of the type of easing required. swing
navArrows Specify whether the left and right arrow buttons are to be displayed. true
arrowLeft Location to get the left arrow image. assets/img/scroll_left.png
arrowRight Location to get the right arrow image. assets/img/scroll_right.png

Here's an example with some options:

<script type="text/javascript">
<!--// Hide from old browsers
    $(function() {
        $('#slider').codaSlider({duration:1500, easing:"easeinOutElastic"});
    });
//-->
</script>

Download the source

Coda Slider is currently at version 1.0 (initial release).

I welcome modifications and enhancements to this code; feel free to fork the Coda Slider repository on Github.

← jump to download!

Support

If you find a bug in Coda Slider then please post an issue on the Github page. I actively encourage development on this code so, please, fork away.

For any other issue please feel free to send an email to pablo@hellopablo.co.uk or tweet me @hellopablo. I'll do my best to get back to you if I can.