This is the old carouFredSel site. The new site can be found at http://dev7studios.com/plugins/caroufredsel

an infinite, circular jQuery carousel plugin: carouFredSel

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.

The carouFredSel-plugin was built using the jQuery-library, it is dual licensed under both the MIT and GPL licenses.

New: check out the carouFredSel WordPress Plugin


Features

Testimonials

  • Fully customizable and skinnable, filled with loads of custom events and options.
  • Scrolls automatically or by using buttons, keys, the mousewheel or by dragging and swiping.
  • Optionally responsible/fluid/liquid out of the box.
  • Supports variable item-sizes (also with a variable number of visible items).
  • Built in keyboard- and mouse-navigation and pagination.
  • 9 Built in effects such as scroll, fade, crossfade, cover and uncover.
  • Capable of using CSS3 transitions.
  • Align (left/center/right) items inside the available width/height.
  • Dynamically add and remove items to/from the carousel.
  • GET and (re)SET the configuration options after creation.

Cedric

Great stuff
CarouFredSel is without a doubt one of the best slideshow plugin. A true "Swiss Army Knife" for every slideshow fan!

Jen

Goodness. This has got to be the simplest carousel I have ever set up, and somehow it has managed that while also having a HUGE number of options. I think I love you.

DrZoidBerg

Awesome! I follow the plugin since v2, and each time I needed, it was soooooooo easy to use.
Thanks a lot! U make me love jquery a lot :)

Milos Aleksic

You can see a lot of "similar things" on the net. But with this one you can make any of them, using always the same concept...

Kim

Thanks! The best carousel plugin I've seen so far! And the robot - birlliant!

Cory House

Wow, this is seriously awesome. I was about to create my own plugin after trying many mediocre jQuery plugins. None offered the configurability I needed out of the box.

Vinod

I love this plugin. I am in love with it. I use it for pretty much every project I work on.

Nachid

Very very good job
This is amazingly well done.
Very well documented and the code is so easy to read and customize.

Pipo Sulpico

The Mother of all Sliders.
Being familiar with pro's and cons of other great sliders like AnythingSlider / bxSlider / SudoSlider.. etc - cFs seems to be the intersection.

Ryan

I still don't know why I bother to look elsewhere for any other plugin. This gets the job done every single time and your quick responses on the support forum allows me to continue to use this script for new projects.

Terri

You guys rock! I've been trying to find a carousel that I could edit without much scripting knowledge. This was so easy! Thank you for sharing.

Dot Red

Great work! The best slider that i've seen in years! I use it for every project. *deep bow*

Chen

In One Word - OUTSTANDING!
You have created an excellent plugin.
After tedious searches for plugin that will meet all my needs I think I finally found one- the range of possibilities answered exactly what I needed.

Max

This carousel plugin is fantastic, thank you so much for sharing it. I just spent 7 hours trying to customize several other plugins for my needs, yours worked right away, perfectly :)

Bookmark and Share


Examples

A carousel with default configuration (5 items visible, 5 items scrolled automatically from right to left).

JavaScript:close x

$("#foo1").carouFredSel();

HTML:close x

<div class="image_carousel">
	<div id="foo1">
		<img src="/caroufredsel-old/examples/images/small/basketball.jpg" alt="basketball" width="140" height="140" />
		<img src="/caroufredsel-old/examples/images/small/beachtree.jpg" alt="beachtree" width="140" height="140" />
		<img src="/caroufredsel-old/examples/images/small/cupcackes.jpg" alt="cupcackes" width="140" height="140" />
		<img src="/caroufredsel-old/examples/images/small/hangmat.jpg" alt="hangmat" width="140" height="140" />
		<img src="/caroufredsel-old/examples/images/small/new_york.jpg" alt="new york" width="140" height="140" />
		<img src="/caroufredsel-old/examples/images/small/laundry.jpg" alt="laundry" width="140" height="140" />
		<img src="/caroufredsel-old/examples/images/small/mom_son.jpg" alt="mom son" width="140" height="140" />
		<img src="/caroufredsel-old/examples/images/small/picknick.jpg" alt="picknick" width="140" height="140" />
		<img src="/caroufredsel-old/examples/images/small/shoes.jpg" alt="shoes" width="140" height="140" />
		<img src="/caroufredsel-old/examples/images/small/paris.jpg" alt="paris" width="140" height="140" />
		<img src="/caroufredsel-old/examples/images/small/sunbading.jpg" alt="sunbading" width="140" height="140" />
		<img src="/caroufredsel-old/examples/images/small/yellow_couple.jpg" alt="yellow couple" width="140" height="140" />
	</div>
	<div class="clearfix"></div>
</div>

CSS:close x

.image_carousel {
	padding: 15px 0 15px 40px;
}
.image_carousel img {
	border: 1px solid #ccc;
	background-color: white;
	padding: 9px;
	margin: 7px;
	display: block;
	float: left;
}
.clearfix {
	float: none;
	clear: both;
}


A non-circular, non-infinite carousel scrolled by user interaction:
press the "previous" and "next" buttons, the "left" and "right" keys on your keyboard or use the pagination.

JavaScript:close x

$("#foo2").carouFredSel({
	circular: false,
	infinite: false,
	auto 	: false,
	prev	: {	
		button	: "#foo2_prev",
		key		: "left"
	},
	next	: { 
		button	: "#foo2_next",
		key		: "right"
	},
	pagination	: "#foo2_pag"
});

HTML:close x

<div class="image_carousel">
	<div id="foo2">
		<img src="/caroufredsel-old/examples/images/small/basketball.jpg" alt="basketball" width="140" height="140" />
		<img src="/caroufredsel-old/examples/images/small/beachtree.jpg" alt="beachtree" width="140" height="140" />
		<img src="/caroufredsel-old/examples/images/small/cupcackes.jpg" alt="cupcackes" width="140" height="140" />
		<img src="/caroufredsel-old/examples/images/small/hangmat.jpg" alt="hangmat" width="140" height="140" />
		<img src="/caroufredsel-old/examples/images/small/new_york.jpg" alt="new york" width="140" height="140" />
		<img src="/caroufredsel-old/examples/images/small/laundry.jpg" alt="laundry" width="140" height="140" />
		<img src="/caroufredsel-old/examples/images/small/mom_son.jpg" alt="mom son" width="140" height="140" />
		<img src="/caroufredsel-old/examples/images/small/picknick.jpg" alt="picknick" width="140" height="140" />
		<img src="/caroufredsel-old/examples/images/small/shoes.jpg" alt="shoes" width="140" height="140" />
		<img src="/caroufredsel-old/examples/images/small/paris.jpg" alt="paris" width="140" height="140" />
		<img src="/caroufredsel-old/examples/images/small/sunbading.jpg" alt="sunbading" width="140" height="140" />
		<img src="/caroufredsel-old/examples/images/small/yellow_couple.jpg" alt="yellow couple" width="140" height="140" />
	</div>
	<div class="clearfix"></div>
	<a class="prev" id="foo2_prev" href="#"><span>prev</span></a>
	<a class="next" id="foo2_next" href="#"><span>next</span></a>
	<div class="pagination" id="foo2_pag"></div>
</div>

CSS:close x

.image_carousel {
	padding: 15px 0 15px 40px;
	position: relative;
}
.image_carousel img {
	border: 1px solid #ccc;
	background-color: white;
	padding: 9px;
	margin: 7px;
	display: block;
	float: left;
}
a.prev, a.next {
	background: url(../images/miscellaneous_sprite.png) no-repeat transparent;
	width: 45px;
	height: 50px;
	display: block;
	position: absolute;
	top: 85px;
}
a.prev {			left: -22px;
					background-position: 0 0; }
a.prev:hover {		background-position: 0 -50px; }
a.prev.disabled {	background-position: 0 -100px !important;  }
a.next {			right: -22px;
					background-position: -50px 0; }
a.next:hover {		background-position: -50px -50px; }
a.next.disabled {	background-position: -50px -100px !important;  }
a.prev.disabled, a.next.disabled {
	cursor: default;
}

a.prev span, a.next span {
	display: none;
}
.pagination {
	text-align: center;
}
.pagination a {
	background: url(../images/miscellaneous_sprite.png) 0 -300px no-repeat transparent;
	width: 15px;
	height: 15px;
	margin: 0 5px 0 0;
	display: inline-block;
}
.pagination a.selected {
	background-position: -25px -300px;
	cursor: default;
}
.pagination a span {
	display: none;
}
.clearfix {
	float: none;
	clear: both;
}