###Demo: http://waysidekoi.github.io/test
###Step 1: Link required files
First and most important, the jQuery library needs to be included (no need to download - link directly from Google). Next, download >the package from this site and link the bxSlider CSS file (for the theme) and the bxSlider Javascript file.
Download BXSlider: http://bxslider.com/lib/jquery.bxslider.zip
Move the /images folder, /plugins folder, jquery.bxslider.css file, and jquery.bxslider.min.js file into the project directory. The CSS file, plugins/ directory and images/ directory must sit in the same folder. In this example, I moved it all into elisa/. The jquery.bxslider.min.js file can be anywhere, as long as you remember where you put it so you can reference that location in the code. The structure for this example looks like:
code/
elisa/
plugins/
images/
jquery.bxslider.css
jquery.bxslider.min.js
page.html
You'll need to get jQuery on the page first. Add it to the <head>:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"</script>`
</head>
Add the tag for the js code:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"</script>
<script src="/elisa/jquery.bxslider.min.js"></script>
</head>
Add the tag for the styles:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"</script>
<script src="/elisa/jquery.bxslider.min.js"></script>
<link href="/elisa/jquery.bxslider.css" rel="stylesheet" />
</head>
###Step 2: Create HTML markup
Create a
<ul class="bxslider">element, with a<li>for each slide. Slides can contain images, video, or any other HTML content!
This part is exactly as the example describes
<body>
<ul class="bxslider">
<li><img src="http://hello-kitty.sanriotown.com/images/george.png"></li>
<li><img src="http://hello-kitty.sanriotown.com/images/mary.png"></li>
<li><img src="http://hello-kitty.sanriotown.com/images/mimmy.png"></li>
<li><img src="http://hello-kitty.sanriotown.com/images/charmmy.png"></li>
<li><img src="http://hello-kitty.sanriotown.com/images/daniel.png"></li>
</ul>
</body>
###Step 3: Call the bxSlider
Call
.bxslider()on<ul class="bxslider">. Note that the call must be made inside of a$(document).ready()call, or the plugin will not work!
We're going to put the javascript code in the body, after the page is loaded. The javascript code resides in <script> tags within the <body>
<body>
<ul class="bxslider">
<li><img src="http://hello-kitty.sanriotown.com/images/george.png"></li>
<li><img src="http://hello-kitty.sanriotown.com/images/mary.png"></li>
<li><img src="http://hello-kitty.sanriotown.com/images/mimmy.png"></li>
<li><img src="http://hello-kitty.sanriotown.com/images/charmmy.png"></li>
<li><img src="http://hello-kitty.sanriotown.com/images/daniel.png"></li>
</ul>
<script>
$(document).ready(function(){
$(".bxslider").bxSlider();
})
</script>
</body>
###DEMO: http://waysidekoi.github.io/test