Skip to content
JQuery Slider Plugin
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Coda Slider

A jQuery HTML Content Slider

Download Here

You can install with bower bower install jquery-codaslider

How to Use

Install the slider in the footer.

  <script src="./js/jquery.easing.1.3.js"></script>
  <script src="./js/jquery.coda-slider-3.0.js"></script>

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

      <div class="coda-slider"  id="slider-id">
            <h2 class="title">Slide 1</h2>
            <h2 class="title">Slide 2</h2>

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

One Panel:

      <h2 class="title">Panel</h2>

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"

Cross Links

In order to control the slider from anywhere on the page, use the following code: (Note that this would control 2 sliders)

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

Auto Slide Controls

Use one or the other depending on whether autoSlide is enabled.

<a href="#" name="start" data-ref="slider-id" >Start</a>
<a href="#" name="stop"  data-ref="slider-id" >Stop</a>


Submit bugs here

Maintained by Kevin Batdorf

Released under the GNU General Public License and the MIT License.

You can’t perform that action at this time.