CarouFredSel - A Flexible And Powerful jQuery Carousel Plugin

Written by Kevin Liew on 03 Jan 2012
70,283 Views • Javascript

Introduction

We can easily find a carousel script online, but to find one that is easy to style, flexible and robust is ain't an easy job. Introduced is a jQuery plugin called carouFredSel, implied by its name, it's a jquery carousel plugin created by Fred

I had numerous bad experiences with carousel script available online, and carouFredSel totally blew me away by its "just work" capability. Pretty sure there is complex calculation going on there to adapt the carousel to CSS styling. For basic implementation, it's really simple, however, it's a steep learning curve (configuration, events, styling etc) to create an unique carousel. The good news is carouFredSel website has a good documentation, a lot of examples (with html, css & js), and a carouFredSel generator called Configuration Robot to assist those who are not familiar with javascript.

Features

  • Custom option to control carousel behavior (auto scroll, pagination, prev & next button, duration etc)
  • Easy to customize and style. Good news for web designer and frontend developer
  • 7 Built in effects: none, scroll, directscroll, fade, crossfade, cover and uncover
  • Supports variable item-sizes (also with a variable number of visible items)
  • Built in keyboard- and mouse-navigation and pagination
  • Able to work with mobile devices (required jquery Touchwipe)
  • A lot of callback events! Great news for those who want to create a custom carousel
  • and a lot more...

Flexibility & Styling

CarouFredSel is a very power carousel. If you know it well, you can style and configure it to become an image slider. Our sister site favbulous.com has made 2 tutorials on styling carouFredSel into 2 different styles of carousel/image sliders. Also, Fred has made a few cool carousels on his own as well to showcase the robustness and flexibility of carouFredSel.

The following is some of the cool examples:

SPECIFICATIONS & DOWNLOAD

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.