A jQuery HTML Content Slider Plugin
Responsive Version Coming Soon
Continuous Sliding
Dynamic Tabs & Arrows
Cross Linking
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>
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"
Complete rebuild from the bottom up.
Added continuous sliding.
Added graphical arrows.
Small fixes.
http://kevinbatdorf.github.com/codaslider
Submit bugs here
Maintained by Kevin Batdorf
Released under the GNU General Public License and the MIT License.
Niall Doherty, the original creater of the Coda Slider.