A repository of over 1000 quality jQuery plugins

jQuery Codaslider

Codaslider is a jQuery Sliders & Carousels plugin.

Created by KevinBatdorf

JQuery Slider Plugin

Not what you're looking for? Click here to view more Sliders & Carousels jQuery plugins

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 might also like these other Sliders & Carousels jQuery Plugins

  • Turntable.js

    Turntable.js is a responsive JQuery slider that will let you rotate through a list of images as your mouse (or […]

  • A responsive slider jQ...

    A responsive slider jQuery plugin with CSS animations. This plugin use CSS3 animations, because performance matters. No need to calculate...

  • Easy Ticker

    jQuery easy ticker is a news ticker like plugin, which scrolls the list infinitely. It is highly customizable, flexible with […]