Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
img
 
 
js
 
 
 
 
 
 

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.