Coda-Slider 2.0 - Niall Doherty's dot biz

Coda-Slider 2.0 - October, 2009
See here for more information and updated versions.

» Download «

Unfortunately your browser does not hava JavaScript capabilities which are required to exploit full functionality of our site. This could be the result of two possible scenarios:

You are using an old web browser, in which case you should upgrade it to a newer version. We recommend the latest version of Firefox.
You have disabled JavaScript in you browser, in which case you will have to enable it to properly use our site. Learn how to enable JavaScript.

Example 1: Default settings

Panel 1

This slider uses default settings.

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.

Panel 2

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.

Panel 3

Cras luctus fringilla odio vel hendrerit. Cras pulvinar auctor sollicitudin. Sed lacus quam, sodales sit amet feugiat sit amet, viverra nec augue. Sed enim ipsum, malesuada quis blandit vel, posuere eget erat. Sed a arcu justo. Integer ultricies, nunc at lobortis facilisis, ligula lacus vestibulum quam, id tincidunt sapien arcu in velit. Vestibulum consequat augue et turpis condimentum mollis sed vitae metus. Morbi leo libero, tincidunt lobortis fermentum eget, rhoncus vel sem. Morbi varius viverra velit vel tempus. Morbi enim turpis, facilisis vel volutpat at, condimentum quis erat. Morbi auctor rutrum libero sed placerat. Etiam ipsum velit, eleifend in vehicula eu, tristique a ipsum. Donec vitae quam vel diam iaculis bibendum eget ut diam. Fusce quis interdum diam. Ut urna justo, dapibus a tempus sit amet, bibendum at lectus. Sed venenatis molestie commodo.

Panel 4

Nulla ultricies ornare erat, a rutrum lacus varius nec. Pellentesque vehicula lobortis dignissim. Ut scelerisque auctor eros sed porttitor. Nullam pulvinar ultrices malesuada. Quisque lobortis bibendum nisi et condimentum. Mauris quis erat vel dui lobortis dignissim.

The above slider is initiated in the <head> like so:

    	$().ready(function() {
            $('#coda-slider-1').codaSlider();
        });

Example 2: Auto Slide

Panel 1

This slider slides automatically, but will stop when the users clicks on any nav button (tabs or arrows).

Panel 2

This slider slides automatically, but will stop when the users clicks on any nav button (tabs or arrows).

Panel 3

This slider slides automatically, but will stop when the users clicks on any nav button (tabs or arrows).

Panel 4

This slider slides automatically, but will stop when the users clicks on any nav button (tabs or arrows).

The above slider is initiated in the <head> like so:

    	$().ready(function() {
            $('#coda-slider-2').codaSlider({
                autoSlide: true,
                autoSlideInterval: 4000,
                autoSlideStopWhenClicked: true
            });
        });

Example 3: Cross Linking

The first set of links controls the first slider below. The second set of links controls the second slider. Note that the URL hash changes for each click. This allows you to link to a certain panel from other pages (but be aware that every slider with cross linking enabled will also load the same panel).

Cross links for the first slider below: Panel 1 | Panel 2 | Panel 3
Cross links for the second slider below: Panel 1 | Panel 2 | Panel 3

Panel 1

This slider can be controlled by the first set of links above.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque.

Panel 2

This slider can be controlled by the first set of links above.

Panel 3

This slider can be controlled by the first set of links above.

Cras luctus fringilla odio vel hendrerit. Cras pulvinar auctor sollicitudin.

Panel 1

This slider can be controlled by the second set of links above.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque.

Panel 2

This slider can be controlled by the second set of links above.

Panel 3

This slider can be controlled by the second set of links above.

Cras luctus fringilla odio vel hendrerit. Cras pulvinar auctor sollicitudin.

Each cross link should have an appropriate class and a rel attribute. The class needs to be "xtrig" by default, but you can specify something different via the settings. The rel value should correspond to the id of the target slider. Example:

    	Panel 1

Note that you can also place cross links within a slider (e.g. if you wanted a "Next" link at the end of each slide).

Example 4: Non-dynamic tabs and arrows

If you want more control over the positioning of the navigation elements, you can hardcode them wherever you want on the page. In the example below, the arrows are left and right of the tabs.

Panel 1
Panel 2
Panel 3
Panel 4

Panel 1

Panel 2

Panel 3

Panel 4

The above slider is initiated in the <head> like so:

    	$().ready(function() {
            $('#coda-slider-5').codaSlider({
                dynamicArrows: false,
                dynamicTabs: false
            });
        });

The HTML for the above slider is as follows. Note the highlighted sections, which is where the navigation is hardcoded.

    	<div class="coda-slider-wrapper">
        	<div id="coda-nav-left-5" class="coda-nav-left"><a href="#" title="Slide left">&#171;</a></div>
            <div id="coda-nav-5" class="coda-nav">
            	<ul>
                	<li class="tab1"><a href="#1">Panel 1</a></li>
                    <li class="tab2"><a href="#2">Panel 2</a></li>
                    <li class="tab3"><a href="#3">Panel 3</a></li>
                    <li class="tab4"><a href="#4">Panel 4</a></li>
                </ul>
            </div>
            <div id="coda-nav-right-5" class="coda-nav-right"><a href="#" title="Slide right">&#187;</a></div>
            <div class="coda-slider preload" id="coda-slider-5">
            	<div class="panel">
                	<div class="panel-wrapper">
                    	<h2 class="title">Panel 1</h2>
                        <p>Lorem ipsum dolor sit amet...</p>
                 	</div>
                </div>
                <div class="panel">
                  	<div class="panel-wrapper">
                        <h2 class="title">Panel 2</h2>
                        <p>Proin nec turpis eget dolor dictum lacinia...</p>
                    </div>
                </div>
                <div class="panel">
                	<div class="panel-wrapper">
                    	<h2 class="title">Panel 3</h2>
                        <p>Cras luctus fringilla odio vel hendrerit....</p>
                    </div>
                </div>
                <div class="panel">
                	<div class="panel-wrapper">
                    	<h2 class="title">Panel 4</h2>
                        <p>Nulla ultricies ornare erat...</p>
                    </div>
                </div>
            </div><!-- .coda-slider -->
        </div><!-- .coda-slider-wrapper -->

Appropriate CSS is then used to style the navigation as needed.

Example 5: Specify first panel to load

Panel 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque.

Panel 2

Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna.

Panel 3

This panel loads first.

Cras luctus fringilla odio vel hendrerit. Cras pulvinar auctor sollicitudin.

Panel 4

Nulla ultricies ornare erat, a rutrum lacus varius nec. Pellentesque vehicula lobortis dignissim. Ut scelerisque auctor eros sed porttitor.

Panel 5

Pellentesque vehicula lobortis dignissim. Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in.

The above slider is initiated in the <head> like so:

    	$().ready(function() {
            $('#coda-slider-6').codaSlider({
                crossLinking: false,
                firstPanelToLoad: 3
            });
        });

Note that cross-linking is disabled so firstPanelToLoad is not overruled by a hash in the URL.

Example 6: Adjusted speed and easing effects

Panel 1

This slider is fast.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque.

Panel 2

This slider is fast.

Proin nec turpis eget dolor dictum lacinia.

Panel 3

This slider is fast.

Cras luctus fringilla odio vel hendrerit. Cras pulvinar auctor sollicitudin. Quisque pellentesque diam vitae odio consectetur non varius nunc sagittis. Etiam pharetra sem nec lectus auctor a interdum nunc pulvinar. Etiam ac mauris turpis, sit amet tristique sem. Aenean lobortis pretium odio. Pellentesque malesuada posuere eros.

Panel 4

This slider is fast.

Nulla ultricies ornare erat, a rutrum lacus varius nec. Pellentesque vehicula lobortis dignissim. Ut scelerisque auctor eros sed porttitor.

The above slider is initiated in the <head> like so:

    	$().ready(function() {
            $('#coda-slider-7').codaSlider({
                autoHeightEaseDuration: 300,
                autoHeightEaseFunction: "easeInBounce",
                slideEaseDuration: 300,
                slideEaseFunction: "easeInBounce"
            });
        });

Panel 1

This slider is slow.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque.

Panel 2

This slider is slow.

Proin nec turpis eget dolor dictum lacinia.

Panel 3

This slider is slow.

Panel 4

This slider is slow.

Nulla ultricies ornare erat, a rutrum lacus varius nec. Pellentesque vehicula lobortis dignissim. Ut scelerisque auctor eros sed porttitor.

The above slider is initiated in the <head> like so:

    	$().ready(function() {
            $('#coda-slider-8').codaSlider({
                autoHeightEaseDuration: 2500,
                autoHeightEaseFunction: "easeInOutElastic",
                slideEaseDuration: 2500,
                slideEaseFunction: "easeInOutElastic"
            });
        });

Example 7: Videos within a slider

Panel 1

Panel 2

Panel 3

Panel 4

Thanks for watching. Find out more about these videos here.

The above slider is initiated in the <head> like so:

    	$().ready(function() {
            $('#coda-slider-9').codaSlider({
                dynamicArrows: false
            });
        });

The following HTML code is used to embed a YouTube video in a panel (note the extra wrapper div):

    	<div class="panel">
        	<div class="panel-wrapper">
            	<h2 class="title">Panel 3</h2>
                <div style="height:350px;"><!-- Extra div helps us set the correct height when video panel is cross-linked -->
                	<object type="application/x-shockwave-flash" style="width:425px; height:350px;" data="http://www.youtube.com/v/zlfKdbWwruY">
                    	<param name="movie" value="http://www.youtube.com/v/zlfKdbWwruY" />
                        <param name="wmode" value="transparent" />
                    </object>
                </div>
            </div>
        </div>

Additional styling is used to set the width of the slider, and to hide the panel titles:

        #coda-slider-9, #coda-slider-9 .panel { width: 465px }
        #coda-slider-9 h2.title { display: none }

back to the top