How to Create Coda Slider in Minutes

Slideshow is great way of displaying contents to your readers. And the use of jQuery in  creating these awesome sliders or slideshows is easy to implement and modify.

Today in this tutorial we are going to create very easy Slider using Coda javascript library.

So before going to the first step you can view the working demo of tutorial and download the source code below.

Step 1: XHTML

[xml]
<div id=”content”>
<h1>Coda Slider | DEMO
<div class=”wrapper”>
<div id=”coda-slider-1″ class=”coda-slider preload”>

<div class=”panel”>
<div class=”panel-wrapper”>
<h2 class=”title”>Welcome!
<p>Hello, welcome to the working demo of Coda Slider. You can see how image, lists or text looks or works on various tabs. I hope you like this tutorial. Enjoy great sliding effect and try out with the above tabs.</p>
</div>
</div>

<div class=”panel”>
<div class=”panel-wrapper”>
<h2 class=”title”>Images can go Like this!
<img src=”images/demo.jpg” alt=”demo image” />
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.
</div>
</div>

<div class=”panel”>
<div class=”panel-wrapper”>
<h2 class=”title”>Recent Articles
<ul>
<li><a title=”15 Must Read Articles for Web Developers” href=”http://nikhilmisal.com/15-must-read-articles-for-web-developers/”>15 Must Read Articles for Web Developers</a></li>
<li><a title=”Why these 31 Blogs Rock (Always)?” href=”http://nikhilmisal.com/why-these-31-blogs-rock-always/”>Why these 31 Blogs Rock (Always)?</a></li>

• CSS3 Styling” href=”http://nikhilmisal.com/create-simple-navigation-using-css3-styling/”>Create Simple Navigation using CSS3 Styling

<li><a title=”30 Superbly Done Creative Ads” href=”http://nikhilmisal.com/30-superbly-done-creative-ads/”>30 Superbly Done Creative Ads</a></li>
</ul>
</div>
</div>

<div class=”panel”>
<div class=”panel-wrapper”>
&lt;h2 class=”title”>Thank You</h2>
This tutorial is created by Nikhil Misal for Powerusers.
&amp;lt;p&amp;gt;Thanks for visiting this demo! If you like this tutorial then please share and comment on it.&amp;lt;/p&amp;gt;
&amp;lt;p&amp;gt;You can freely use this slider for your future projects so go ahead and download the &amp;lt;a href=”#”&amp;gt;Source Code&amp;lt;/a&amp;gt;.&amp;lt;/p&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;/div&amp;gt;

&amp;lt;/div&amp;gt;&amp;lt;!– .coda-slider –&amp;gt;
&amp;lt;/div&amp;gt;&amp;lt;!– .coda-slider-wrapper –&amp;gt;
&amp;lt;h3&amp;gt;&amp;lt;a title=”Go Back to Tutorial” href=”#”&amp;gt;Go Back to Tutorial&amp;lt;/a&amp;gt;&amp;lt;/h3&amp;gt;
Created By: Nikhil Misal
&amp;lt;/div&amp;gt;
[/xml]

Here the content of each slide is include in panel-wrapper and each panel is included in panel. And all these panels are included in coda-slider.

Step 2: CSS

Lets add some styling to the above file.

[css]
/*Page Styling */
body {
margin: 0;
padding: 0;
background: url(images/back.jpg);
}

#content {
width: 940px;
margin: 0 auto;
padding-bottom: 50px;
font: 1.5em Keffeesatz, Verdana, Geneva, sans-serif;
}

@font-face { font-family: Keffeesatz; src: url(fonts/YanoneKaffeesatz-Light.otf) format(“opentype”) }
@font-face { font-family: KeffeesatzBold; src: url(fonts/YanoneKaffeesatz-Bold.otf) format(“opentype”) }

h1 {
color: #ddd;
text-align: center;
padding-top: 20px;
font: 2.5em KeffeesatzBold, Verdana, Geneva, sans-serif
}

h2 {
font: 2em KeffeesatzBold, Arial, Helvetica, sans-serif;
color: #999;
text-shadow: 1px 1px 2px #000;
}

/* Coda Bar */
.coda-nav {
height: 30px;
background: #eee;
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.23, #ddd),
color-stop(0.62, #eee)
);
background: -moz-linear-gradient(
center bottom,
#ddd 23%,
#eee 62%
);
width: 700px !important;
margin: 0 auto;
border: 5px solid #aaa;
border-bottom: none;
}

.coda-nav ul {
clear: both;
display: block;
margin: auto;
overflow: hidden;
}

.coda-nav ul li {
display: inline;
overflow: hidden;
}

.coda-nav ul li a {
background: url(images/button.jpg) top center no-repeat;
color: #fff;
display: block;
float: left;
margin-right: 1px;
text-decoration: none;
width: 30px;
height: 30px;
text-indent: -999px;
}

.coda-nav ul li a.current {
background: url(images/button-active.jpg) top center no-repeat;
}

.coda-nav ul li a:hover {
background: url(images/button-active.jpg) top center no-repeat;
}

/* Slider Styling */
.coda-slider {
display: block;
width: 700px;
overflow: hidden;
margin: 0 auto;
margin-bottom: 50px;
background: #eee;
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.23, #ddd),
color-stop(0.62, #eee)
);
background: -moz-linear-gradient(
center bottom,
#ddd 23%,
#eee 62%
);
border: 5px solid #aaa;
border-top: none;
}

.panel-container {
position: relative;
}

.coda-slider .panel {
float: left;
width: 700px;
}

.panel-wrapper {
margin: 0 20px;
overflow: hidden;
padding: 20px 0;
}
.panel-wrapper img {
float: left;
margin: 0 20px 20px 0;
border: 5px solid #999;
}
.panel-wrapper ul li {
margin: 10px 0;
}
[/css]

We are using some CSS3 properties here. Like Gradient background and external fonts embedding @font-face. You can learn more about these properties here:

1. Speed Up with CSS3 Gradients

2. The Essential Guide to @font-face

Step 3: jQuery

[javascript]

$().ready(function() {
$(‘.coda-slider’).codaSlider({
autoHeightEaseDuration: 2500,
autoHeightEaseFunction: “easeInOutElastic”,
slideEaseDuration: 2500,
slideEaseFunction: “easeInOutElastic”
});

});
&amp;lt;/script&amp;gt;
[/javascript]

Add the above script in the <head> tag. This will initiate the slider operation. You can change above value and play with some functions.

I hope you like this tutorial. If you enjoyed it then please put your comments below and don’t forget to download the source code.

Enjoy the real success with testking 70-640 and 70-652 online training programs and latest HP2-Z18. Also prepare for next level with quality 000-115 dumps questions and answers of 642-654 exam.