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.
The carouFredSel-plugin was built using the jQuery-library.
It is dual licensed under the MIT and GPL licenses.
Features
Testimonials
- Fully customizable and skinnable.
- 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.
- 7 Built in effects: none, scroll, directscroll, fade, crossfade, cover and uncover.
- Filled with intelligent custom events and loads of options.
- 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.
Jacco van der Post
Finally a carousel which works! It's circular, lots of options and can be combined with a lightbox without troubles. That's why I have build a TYPO3 plugin based on carouFredSel!
Cedric
Great stuff
CarouFredSel is without a doubt one of the best slideshow plugin. A true "Swiss Army Knife" for every slideshow fan!
Rodja Adolph
Only wanted to leave a huge "THANK YOU" for developing this awesome plugin to the public.
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.
228vit
Ve-e-ery nice plugin,
in few minutes I get working carou. w/o any problem :)
Irengba
Wow...
this is awesome. Great work.
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="/examples/images/small/basketball.jpg" alt="basketball" width="140" height="140" /> <img src="/examples/images/small/beachtree.jpg" alt="beachtree" width="140" height="140" /> <img src="/examples/images/small/cupcackes.jpg" alt="cupcackes" width="140" height="140" /> <img src="/examples/images/small/hangmat.jpg" alt="hangmat" width="140" height="140" /> <img src="/examples/images/small/new_york.jpg" alt="new york" width="140" height="140" /> <img src="/examples/images/small/laundry.jpg" alt="laundry" width="140" height="140" /> <img src="/examples/images/small/mom_son.jpg" alt="mom son" width="140" height="140" /> <img src="/examples/images/small/picknick.jpg" alt="picknick" width="140" height="140" /> <img src="/examples/images/small/shoes.jpg" alt="shoes" width="140" height="140" /> <img src="/examples/images/small/paris.jpg" alt="paris" width="140" height="140" /> <img src="/examples/images/small/sunbading.jpg" alt="sunbading" width="140" height="140" /> <img src="/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,
scroll : {
items : "page"
},
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="/examples/images/small/basketball.jpg" alt="basketball" width="140" height="140" /> <img src="/examples/images/small/beachtree.jpg" alt="beachtree" width="140" height="140" /> <img src="/examples/images/small/cupcackes.jpg" alt="cupcackes" width="140" height="140" /> <img src="/examples/images/small/hangmat.jpg" alt="hangmat" width="140" height="140" /> <img src="/examples/images/small/new_york.jpg" alt="new york" width="140" height="140" /> <img src="/examples/images/small/laundry.jpg" alt="laundry" width="140" height="140" /> <img src="/examples/images/small/mom_son.jpg" alt="mom son" width="140" height="140" /> <img src="/examples/images/small/picknick.jpg" alt="picknick" width="140" height="140" /> <img src="/examples/images/small/shoes.jpg" alt="shoes" width="140" height="140" /> <img src="/examples/images/small/paris.jpg" alt="paris" width="140" height="140" /> <img src="/examples/images/small/sunbading.jpg" alt="sunbading" width="140" height="140" /> <img src="/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;
}
More examples
- Basic carousels.
- Carousels scrolled by user interaction.
- Variable item-sizes + variable number of visible items.
- Responsive / fluid carousels.
- Continuously scrolling carousels.
- Using the callback functions.
- Using the custom events.
- Intermediate carousel examples.
- Dynamically add and remove items.
- GET and (re)SET the configuration options.
- Carousels in combination with lightbox- and tooltip-plugins.
- Cool Carousel examples (inspiration)
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.
Looking for inspiration? Check out these cool carousel examples!
Feedback
Any kind of feedback is more than welcome in this forum-topic.
Thank you!
