Useful circular and responsive jQuery carousel

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 tag of the page.


3. Create scrollable content

Create a range of HTML elements and place them inside a container-element.

Example: A series of images.








Example: An ordered or unordered list.

  • c
  • a
  • r
  • o
  • u
  • F
  • r
  • e
  • d
  • S
  • e
  • l

Example: Whatever HTML elements.

Infinity

A concept that in many fields refers to a quantity without bound or end.

Circular journey

An excursion in which the final destination is the same as the starting point.

jQuery

jQuery  is a cross-browser JavaScript library designed to simplify the client-side scripting.

Carousel

A carousel is an amusement ride consisting of a rotating circular platform with seats.

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
}                   
});   
});

Download: http://www.htmldrive.net/items/download/1178

Leave a comment