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! :)
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>
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>
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.
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.