Submit your widget
HomeSlideshow & ScrollerUseful circular and responsive jQuery carousel

Useful circular and responsive jQuery carousel

Created 12 years ago   Views 20794   downloads 4527    Author caroufredsel
Useful circular and responsive jQuery carousel
View DemoDownload
72
Share |

jQuery.carouFredSel is a plugin that turns any kind of HTML element into a carousel. It can scroll one or multiple items simultaneously, horizontal or vertical, infinite and circular, automatically or by user interaction. Oh, and it's responsive too.

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".

The article source:http://caroufredsel.frebsite.nl/installation.php

You might also like