Coda Slider
A jQuery HTML Content Slider
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: "« left",
dynamicArrowRightText: "right »",
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.