Additional slider function options here
*Download sample files from dropbox, july30demo.zip
1. Add following code in between <head></head>. This will attach all required external CSS and Javascript files. Be sure to check accurate file path in src and href values.
<link rel="stylesheet" type="text/css" media="screen" href="css/coda-slider.css">
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui-1.8.20.custom.min.js"></script>
<script src="js/jquery.coda-slider-3.0.js"></script>
<script>
$().ready(function(){
$('#slider-id').codaSlider({
autoHeight: true,
/* used to remove previous and next buttons, set to true to use buttons*/ dynamicArrows: false,
/* used to setup text label on previous and next buttons*/
/*dynamicArrowLeftText: "« previous",*/
/* dynamicArrowRightText: "next »",*/
});
});
</script>
**To modify tab/header panels, change content in between <h2></h2>.
**To modify panel content, delete "//Content goes here" and add appropriate text, image or links.
**To adjust placement of coda slider, create <div></div> around existing content and create CSS with absolute positioning.
<div class="coda-slider" id="slider-id">
<div>
<h2 class="title">Panel 1</h2>
//Content goes here
</div>
<div>
<h2 class="title">Panel 2</h2>
//Content goes here
</div>
</div>
3. Add non coda slider CSS rules in your own external CSS file (or internally in html doc). Modify coda slider styles (width of panels, color of tabs, etc) in coda-slider.css file.
No comments:
Post a Comment