Skip to content

Instantly share code, notes, and snippets.

@DevinWalker

DevinWalker/jflow-demo-head.html

Last active December 15, 2015 18:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save DevinWalker/5308086 to your computer and use it in GitHub Desktop.
Save DevinWalker/5308086 to your computer and use it in GitHub Desktop.
Download ZIP
Include the jFlow scripts in your document head - The first step to setting up any jQuery plugin is ensuring you have your necessary stylesheets and javascript included in your document. The best place is the head of your document head to ensure that all necessary scripts are loaded first by the browser.
Raw
jflow-demo-head.html
<head>
<link href="styles/jflow.style.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="scripts/jflow.plus.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myController").jFlow({
controller: ".jFlowControl", // must be class, use . sign
slideWrapper : "#jFlowSlider", // must be id, use # sign
slides: "#mySlides", // the div where all your sliding divs are nested in
selectedWrapper: "jFlowSelected", // just pure text, no sign
effect: "flow", //this is the slide effect (rewind or flow)
width: "940px", // this is the width for the content-slider
height: "300px", // this is the height for the content-slider
duration: 400, // time in milliseconds to transition one slide
pause: 5000, //time between transitions
prev: ".jFlowPrev", // must be class, use . sign
next: ".jFlowNext", // must be class, use . sign
auto: true
});
});
</script>
</head>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment