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, you can use it on your blog or website on any kind of managed hosting server.
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 :)
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,
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!
