Introducing The Coda Slider 3.0

Welcome to the Coda Slider version 3, the first major release since 2009. Originally released way back in 2007 by Niall Doherty, the Coda Slider has been rebuilt from the ground up, packed with new features and improved functionality.

Your Favorite Coda Slider Just Got Better!

The most noticeable feature is the continuous sliding, but you'll likely also stumble upon little fixes here and there that improve the overall user experience. Check below for a few demos and stay tuned for future updates.

Have a request or find a bug? Let me know on Github, or if you prefer email, contact me here.

How does it work?

It's simple! Each slide can be built and styled anyway you choose. The entire slider is created dynamically around your HTML and can be modified via the settings below. Additionally, version 3.0 is backwards compatible meaning that if you are already using version 2.0, you don't need to change a thing.

Creating a panel is as simple as this:

<div class="coda-slider" id="slider-id">
  <div>
    <h2 class="title">Panel1</h2>
  </div>
</div>

Installation

Installation is simple and only requires the following to be placed within the <head></head>.

</script>
  $().ready(function() {
    $('#slider-id').codaSlider();
});
</script>
                

The #slider-id can be any unique id that you apply to the slider. You also need to be sure you import the jQuery, jQuery UI, and the Coda Slider script files as well as the Coda Slider stylesheet. See below for detailed instructions and advanced options.

Contact

Here's an example of a contact form.
This form won't submit, but you can always try me on twitter @kevinbatdorf

Continuous Sliding

Angkor Wat

*
Angkor Wat

Cambodia's Angkor Wat temple.

Sihanoukville Beach

*
Angkor Wat

Ayutthaya, Thailand

*
Angkor Wat

Panel 3

Dynamic Positioning

The tabs are dynamically positioned based on the settings. Options include "top", "bottom", "left", "right" and "center"

Hard-coded Positioning

If you prefer, you can hard-code the naviation and tabs to get the perfect design. You must be sure to set both dynamicTabs and dynamicArrows to false in the settings. Then, use the following as a guide when building your html:

<div id="slider-id-wrapper" class="coda-slider-wrapper">
  <div class="coda-nav-left"><a href="#" data-dir="prev" title="Slide left">« left</a></div>
  <div class="coda-nav">
    <ul>
      <li class="tab1"><a href="#1" title="Panel 1">Panel 1</a></li>
      <li class="tab2"><a href="#2" title="Panel 2">Panel 2</a></li>
      <li class="tab3"><a href="#3" title="Panel 3">Panel 3</a></li>
      <li class="tab4"><a href="#4" title="Panel 4">Panel 4</a></li>
    </ul>
  </div>
  <div class="coda-nav-right"><a href="#" data-dir="next" title="Slide right">» right</a></div>
  <class="coda-slider" id="slider-id">
  /* Panels go here */
  </div>
</div>

CSS

The entire panel is styled with CSS exactly how you would expect. You can make changes directly to the included CSS file, or you can create your own style sheet. If you are using SASS, I have also included a SCSS stylesheet for your convenience.

Cross-linking

Cross-linking is simple. The links below were created as follows:

<a href="#1" data-ref="dynamic-tabs">Tab 1</a>

the #1 points to the 1st tab, and the rel attribute points to the slider ID. Note that it's possible to link to multible sliders by separating the ids with a space, for example:

<a href="#1" data-ref="dynamic-tabs another-slider">Tab 1</a>

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.