Installation
1. Doctype
First, make sure you are using valid DOCTYPE. This is required for the carousels to look and function correctly.
2. Include nessesary .js files
Include the jQuery library and the carouFredSel-plugin inside the <head> tag of the page.
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.carouFredSel.js"></script>
3. Create scrollable content
Create a range of HTML elements and place them inside a container-element.
Example: A series of images.
<div id="foo"> <img src="img1.jpg" width="300" /> <img src="img2.jpg" width="300" /> <img src="img3.jpg" width="300" /> <img src="img4.jpg" width="300" /> <img src="img5.jpg" width="300" /> <img src="img6.jpg" width="300" /> <img src="img7.jpg" width="300" /> <img src="img8.jpg" width="300" /> </div>
Example: An ordered or unordered list.
<ul id="foo"> <li> c </li> <li> a </li> <li> r </li> <li> o </li> <li> u </li> <li> F </li> <li> r </li> <li> e </li> <li> d </li> <li> S </li> <li> e </li> <li> l </li> </ul>
Example: Whatever HTML elements.
<div id="foo"> <div> <h3>Infinity</h3> <p>A concept that in many fields refers to a quantity without bound or end.</p> </div> <div> <h3>Circular journey</h3> <p>An excursion in which the final destination is the same as the starting point.</p> </div> <div> <h3>jQuery</h3> <p>jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting.</p> </div> <div> <h3>Carousel</h3> <p>A carousel is an amusement ride consisting of a rotating circular platform with seats.</p> </div> </div>
4. Fire the plugin
Fire the carouFredSel-plugin on the container-element. For all the configuration-options, have a look at the configuration-page.
If you are not familiar with jQuery, please, read this tutorial for beginners.
$(document).ready(function() {
// Using default configuration
$("#foo1").carouFredSel();
// Using custom configuration
$("#foo2").carouFredSel({
items : 2,
direction : "up",
scroll : {
items : 1,
easing : "easeOutBounce",
duration : 1000,
pauseOnHover : true
}
});
});
Note: After the plugin has been executed, the container-element has been wrapped inside a div-element with class="caroufredsel_wrapper".
Need some help?
When you're in desperate need of help, you might want to visit the examples-pages or have a peak at the tips & tricks and maybe the known issues. Or -if everything else fails- try the support forum.
Feedback
Any kind of feedback is more than welcome in this forum-topic.
Thank you!
