Mick Redman: transition

Tuesday, 28 September 2010

Panel Slider

The example below uses the excellent Coda-Slider by Niall Doherty at http://www.ndoherty.biz/tag/coda-slider/
All I have done is simplified the implementation, making it easy to begin using the code.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Panel Slider</title>
<style>
.coda-slider-wrapper.arrows .coda-slider, .coda-slider .panel
{
width: 600px
}
.coda-nav ul li a.current
{
background:#CCCCCC;
}
.coda-nav ul, .coda-slider-wrapper
{
clear:both;
}
.coda-nav ul, .coda-nav ul li a, .coda-slider .panel
{
display:block;
}
.coda-nav ul, .coda-slider
{
overflow:hidden;
}
.coda-nav ul li a, .coda-slider, .coda-slider .panel, .coda-nav-left, .coda-nav-right
{
float:left;
}
.coda-slider, .coda-slider .panel-container
{
position:relative;
}
.coda-nav ul
{
margin:auto;
}
.coda-nav ul li
{
display:inline;
}
.coda-nav ul li a
{
background:#000000;
color:#FFFFFF;
margin-right:1px;
text-decoration:none;
}
.coda-slider-wrapper{

overflow:auto;
}
.coda-nav-left a, .coda-nav-right a
{
display:none;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript" src="http://www.ndoherty.biz/demos/coda-slider/2.0/javascripts/jquery.coda-slider-2.0.js"></script>
<script type="text/javascript">
$().ready(function()
{
$('#coda-slider-1').codaSlider();
});
</script>
</head>
<body>
<div class="coda-slider-wrapper">
<div class="coda-slider preload" id="coda-slider-1">
<div class="panel">
<div class="panel-wrapper">
<h2 class="title">Panel 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
</div>
<div class="panel">
<div class="panel-wrapper">
<h2 class="title">Panel 2</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
</div>
</div>
</div>
</div>
</body>
</html>