Using the callback-functions
A carousel always scrolls using the configuration of either the prev, the next or the pagination object. When scolling via the pagination, the pagination object is used. When scrolling forward the next object is used and when scrolling backward the prev object (...).
All three objects have their own onBefore, onAfter, onEnd and conditions callback-functions. If a function is not defined, it will be inherited from the parent object. Please see the configuration-page for more information.
A carousel with an onBefore and onAfter function, using the newItems parameter:
- Create the carousel and set a text in the textbox
- Before the carousel starts scrolling, a text is set in the textbox
- After the carousel stops scrolling, a second text is set in the textbox
JavaScript:close x
$("#foo1").carouFredSel({
auto : false,
onCreate: function(items) {
var txt = "";
items.each(function() { txt += "<li>" + $(this).attr("src").split("/").pop() + "</li>"; });
$("#foo1_log").html("<p>Carousel created showing images:</p><ul>" + txt + "</ul>");
},
scroll : {
onAfter : function(oldItems, newItems) {
var txt = "";
newItems.each(function() { txt += "<li>" + $(this).attr("src").split("/").pop() + "</li>"; });
$("#foo1_log").html("<p>Now showing images:</p><ul>" + txt + "</ul>");
}
},
prev : {
button : "#foo1_prev",
onBefore: function() {
$("#foo1_log").html("<p>Started scrolling to the <strong>left</strong>.</p>");
}
},
next : {
button : "#foo1_next",
onBefore: function() {
$("#foo1_log").html("<p>Started scrolling to the <strong>right</strong>.</p>");
}
}
});
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> <a class="prev" id="foo1_prev" href="#"><span>prev</span></a> <a class="next" id="foo1_next" href="#"><span>next</span></a> <div class="logbox" id="foo1_log"><p>Click the previous- or next-button</p></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.next { right: -22px;
background-position: -50px 0; }
a.next:hover { background-position: -50px -50px; }
a.prev span, a.next span {
display: none;
}
.logbox {
background-color: #f9ffcc;
border: 1px dotted #ff3300;
padding: 10px 20px;
}
.logbox p {
color: #ff3300;
margin: 0;
}
.clearfix {
float: none;
clear: both;
}
Activate the carousel by clicking the "play" button.
- after the carousel stops scrolling, additional information about the current item is shown
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 JavaScript library designed to simplify the client-side scripting.
Carousel
A carousel is an amusement ride consisting of a rotating circular platform with seats.
Showing item 1 of 4.
JavaScript:close x
$("#foo2").carouFredSel({
auto : false,
next : "#foo2_play",
direction : "up",
items : 1,
scroll : {
onBefore : function(oldItems, newItems) {
$("#foo2").animate({ opacity: 1 }, 500);
$("#foo2_play").hide();
},
onAfter : function(oldItems, newItems) {
$(this).trigger("currentPosition", function( pos ) {
var txt = "<p>Showing item " + (pos+1) + " of " + $("> *", this).length + ".</p>";
$("#foo2_log").html( txt );
});
setTimeout(function() {
$("#foo2").animate({ opacity: 0.5 }, 500);
$("#foo2_play").show();
newItems.find("div").slideUp();
}, 5000);
oldItems.find("div").hide();
newItems.find("div").slideDown();
}
}
}).css({ opacity: 0.5 });
HTML:close x
<div class="html_carousel"> <div id="foo2"> <div class="slide"> <img src="/examples/images/large/carousel_1.jpg" alt="carousel 1" width="870" height="400" /> <div> <h4>Infinity</h4> <p>A concept that in many fields refers to a quantity without bound or end.</p> </div> </div> <div class="slide"> <img src="/examples/images/large/carousel_2.jpg" alt="carousel 2" width="870" height="400" /> <div> <h4>Circular journey</h4> <p>An excursion in which the final destination is the same as the starting point.</p> </div> </div> <div class="slide"> <img src="/examples/images/large/carousel_3.jpg" alt="carousel 3" width="870" height="400" /> <div> <h4>jQuery</h4> <p>jQuery is a JavaScript library designed to simplify the client-side scripting.</p> </div> </div> <div class="slide"> <img src="/examples/images/large/carousel_4.jpg" alt="carousel 4" width="870" height="400" /> <div> <h4>Carousel</h4> <p>A carousel is an amusement ride consisting of a rotating circular platform with seats.</p> </div> </div> </div> <div class="clearfix"></div> <a id="foo2_play" class="play" href="#"><span>></span></a> <div class="logbox" id="foo2_log"><p>Showing item 1 of 4.</p></div> </div>
CSS:close x
.html_carousel {
padding: 15px 0 15px 40px;
position: relative;
}
.html_carousel div.slide {
position: relative;
}
.html_carousel div.slide div {
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
display: none;
position: absolute;
bottom: 0;
}
.html_carousel div.slide h4 {
font-size: 35px;
padding: 30px 0 0 100px;
}
.html_carousel div.slide p {
font-size: 16px;
padding: 0 0 30px 100px;
}
.html_carousel div.slide h4, .html_carousel div.slide p {
color: white;
margin: 0;
}
.logbox {
background-color: #f9ffcc;
border: 1px dotted #ff3300;
padding: 10px 20px;
}
.logbox p {
color: #ff3300;
margin: 0;
}
a.play {
background: url(../images/miscellaneous_sprite.png) no-repeat transparent;
width: 45px;
height: 45px;
display: block;
position: absolute;
top: 185px;
left: 50%;
margin-left: -22px;
}
a.play { background-position: -150px 0; }
a.play:hover { background-position: -150px -50px; }
a.play.paused { background-position: -100px 0; }
a.play.paused:hover { background-position: -100px -50px; }
a.play span { display: none; }
.clearfix {
float: none;
clear: both;
}
A carousel that highlights the centered image in the onAfter function.
JavaScript:close x
function highlight( items ) {
items.filter(":eq(2)").css({
backgroundColor: "#ff9",
width : 140,
height : 140,
margin : 7
});
}
function unhighlight( items ) {
items.css({
backgroundColor: "#fff",
width : 100,
height : 100,
margin : 27
});
}
$("#foo3").carouFredSel({
scroll : 2,
auto : {
onBefore: function(oldItems, newItems) {
unhighlight( oldItems );
},
onAfter : function(oldItems, newItems) {
highlight( newItems );
}
}
});
unhighlight( $("#foo3 > *") );
highlight( $("#foo3 > *") );
HTML:close x
<div class="image_carousel"> <div id="foo3"> <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;
}
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)
