codaslider's Introduction

Coda Slider

A jQuery HTML Content Slider Plugin

Standard Version

Responsive Version Coming Soon

Features

Continuous Sliding
Dynamic Tabs & Arrows
Cross Linking

How to Use

See here for further details.

Install the slider in the head after jQuery.

    <script src="./js/jquery.coda-slider-3.0.js"></script>  
    $().ready(function(){
        $('#slider-id').codaSlider();
      });

Where the slider-id matches the id of the content, as follows:

      <div class="coda-slider"  id="slider-id">
          <div>
            <h2 class="title">Panel 1</h2>
            <p>Content</p>
          </div>
          <div>
            <h2 class="title">Panel 2</h2>
            <p>Content</p>
          </div>
      </div>

Add as many panels as you like within the <div class="coda-slider id="slider-id"></div>

One Panel:

    <div>
      <h2 class="title">Panel</h2>
      <p>Content</p>
    </div>

Default Settings

                  autoHeight: true,
      autoHeightEaseDuration: 1500,
      autoHeightEaseFunction: "easeInOutExpo",
                   autoSlide: false,
         autoSliderDirection: 'right',
           autoSlideInterval: 7000,
           autoSlideControls: false,
          autoSlideStartText: 'Start',
           autoSlideStopText: 'Stop',
    autoSlideStopWhenClicked: true,
                  continuous: true,
               dynamicArrows: true,
      dynamicArrowsGraphical: false,
        dynamicArrowLeftText: "&#171; left",
       dynamicArrowRightText: "right &#187;",
                 dynamicTabs: true,
            dynamicTabsAlign: "center",
         dynamicTabsPosition: "top",
            firstPanelToLoad: 1,
          panelTitleSelector: "h2.title",
           slideEaseDuration: 1500,
           slideEaseFunction: "easeInOutExpo"