Coda Slider
A jQuery HTML Content Slider Plugin
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: "« left", dynamicArrowRightText: "right »", dynamicTabs: true, dynamicTabsAlign: "center", dynamicTabsPosition: "top", firstPanelToLoad: 1, panelTitleSelector: "h2.title", slideEaseDuration: 1500, slideEaseFunction: "easeInOutExpo"
Version 3.0
Complete rebuild from the bottom up.
Added continuous sliding.
Added graphical arrows.
Small fixes.
Documentation
http://kevinbatdorf.github.com/codaslider
Submit bugs here
Maintained by Kevin Batdorf
Released under the GNU General Public License and the MIT License.
Very Special Thanks to:
Niall Doherty, the original creater of the Coda Slider.