Skip to content
JQuery Slider Plugin
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
img
js
MIT-LICENSE.txt
README.markdown
bower.json
demo.html

README.markdown

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>
  <script>$('#slider-id').codaSlider();</script>

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

      <div class="coda-slider"  id="slider-id">
          <div>
            <h2 class="title">Slide 1</h2>
            <p>Content</p>
          </div>
          <div>
            <h2 class="title">Slide 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"

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>

Support

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.